React中受控组件和非受控组件

一、受控组件

受控组件就是可以被 react 状态控制的组件
在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。
好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。

双向数据绑定就是受控组件：

受控组件DOM操作、双向数据绑定

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }

    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}

ReactDOM.render(<Input/>,window.app)

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class Sum extends Component{
    constructor(){
        super();
        this.state={a:0,b:0,result:0}
    }
    handleChangeA=(event)=>{
        this.setState({
            a:parseInt(event.target.value),
            result:parseInt(event.target.value)+this.state.b
        })
    }
    handleChangeB=(event)=>{
        this.setState({
            b:parseInt(event.target.value),
            result:parseInt(event.target.value)+this.state.a
        })
    }
    render(){
        return (
            <div>
                <input type="text" value={this.state.a} onChange={this.handleChangeA}/> +
                <input type="text" value={this.state.b} onChange={this.handleChangeB} /> = 
                <input type="text" value={this.state.result}/>
            </div>
        )
    }
}

ReactDOM.render(<Sum/>,window.app)

二、非受控组件

表单数据由 DOM 本身处理。即不受 setState() 的控制，与传统的HTML表单输入相似，input 输入值即显示最新值（使用 ref 从 DOM 获取表单值）

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

三、结论

受控和非受控元素都有其优点，根据具体情况选择。如果表单在 UI 反馈方面非常简单，则对 ref 进行控制是完全正确的，即使用非受控组件。

特征	非受控制	受控
一次性检索（例如表单提交）	yes	yes
及时验证	no	yes
有条件的禁用提交按钮	no	yes
执行输入格式	no	yes
一个数据的几个输入	no	yes
动态输入	no	yes