标签：受控 defaultValue value state input 组件 antd 输入

1. react通过state 保存可变状态的值，只能通过 setState()来更新

2. html中，表单元素（乳 input、textarea、select）通常自己维护state,并且根据用户输入进行更新

3.俩者结合起来，使react的state成为 ‘唯一数据源’，被react以这种方式控制的表单输入元素叫做 受控组件

4. 非受控组件就是 原生dom中的value属性

5.

非受控组件这么写：

<input type="text" defaultValue="a" />

这个 defaultValue 其实就是原生DOM中的 value 属性。

这样写出的来的组件，其value值就是用户输入的内容，React完全不管、也管不到输入的过程。

而受控组件是这么写的：

<input type="text" value={this.state.name} onChange={this.handleChange} />

handleChange: function(e) {
  this.setState({name: e.target.value});
}

value属性不再是一个写死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 负责管理的。 

这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。

同时，React会优化这个渲染过程，实际上它仍然是通过设置input的value来实现的。

对比受控组件和非受控组件的输入流程：

• 非受控组件： 用户输入A => input 中显示A
• 受控组件： 用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A

正式因为这样，使得 React 的 state 成为唯一数据源。对于受控组件来说，输入的值始终由 React 的 state 驱动。

所以官方强烈推荐使用受控组件，因为它能更好的控制组件的生命流程。

标签：受控,defaultValue,value,state,input,组件,antd,输入
来源： https://blog.csdn.net/xinxin_csdn/article/details/119385973

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。