浅谈react受控组件与非受控组件(小结)


Posted in Javascript onFebruary 09, 2018

我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器。这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是,因为React是单向数据流绑定的,这些组件可能会变得失控:

1.一个维护它自己state里的value值的<Input>组件无法从外部被修改;

2.一个通过props来设置value值的<Input>组件只能通过外部控制来更新。

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值。具体编辑页面中文本框相关的代码如下:

... //render方法上面的内容省略
 <FormItem
   label="问题描述:"
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

在给代码段所属的组件传递value props后,文本框中的默认值一直为空,因为该页面所在的状态state中,value所对应的状态初始值为空,导致后续异步请求成功后改变value对应的状态中的值,仍然显示为空。

google一下具体原因,原来React的form表单组件中的defaultValue一经传递值后,后续改变defaultValue都将不起作用,被忽略了。

具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。

下面就说说这个受控组件与非受控组件,它们都是基于react的form表单组件元素的,具体也可参考react官网这方面介绍

受控组件

就形式上来说,受控组件就是为某个form表单组件添加value属性;非受控组件就是没有添加value属性的组件;,受控组件的形式如下形式:

render: function() {
  return <input type="text" value="Hello!" />;
 }

添加了value 属性的表单组件元素其内部是不会维护自己状态state,组件的value值一旦设置某个具体值就始终是这个值,所以需要调用者来控制组件value的改变。

这种写法带来一个问题:渲染后的input组件的用户交互,用户输入的任何值将不起作用,input输入框中的值始终为Hello!。这与HTML中input表现不一致。

为此,为了控制该组件,就需要能能够控制input组件的值,需要借助其内部的状态state,即组件内部要维护一个状态state以便配合input组件的onChange和setState方法来完成对组件的控制;例如对上面形式可以进行封装一个inputItem组件,其内部维护一个state状态,具体代码如下:

export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

这样就可以在外部像下面这样调用InputItem组件了:

<InputItem value={this.state.userName} />

这样就可以控制react的Input组件了,其实就是需要借助react的有状态component来完成,因为有状态component可以内部维护state。

非受控组件

表现形式上,react中没有添加value属性的表单组件元素就是非受控组件。表现形式如下:

<input type="text" />

非受控组件在底层实现时是在其内部维护了自己的状态state;这样表现出用户输入任何值都能反应到元素上。

总结

在使用react component时,都会遇到受控组件或者非受控组件;在目前,react组件推荐使用stateless component,但是使用该形式来实现react component时使用非受控组件到倒是没有什么大问题,若是需要控制受控元素就会有出现问题,表现在:

`受控组件`需要主动维护一个内部state状态的,而`stateless component`是无需维护组件的state状态的,二者有冲突。
所以,受控元素就不能使用stateless component来创建。

鉴于受控组件与非受控组件的特点,二者应用的地方也有所不同,主要表现在:

  1. 受控元素,一般用在需要动态设置其初始值的情况;例如某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。
  2. 非受控元素, 一般用于无任何动态初始值信息的情况; 例如form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 #Javascript
Vuejs 单文件组件实例详解
Feb 09 #Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 #Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 #Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 #Javascript
vue中使用ueditor富文本编辑器
Feb 08 #Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 #Javascript
You might like
杏林同学录(九)
2006/10/09 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
两款万能的php分页类
2015/11/12 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python如何保存文本文件
2020/06/07 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
发展部经理职责规定
2014/02/22 职场文书
励志演讲稿200字
2014/08/21 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技