浅谈react受控组件与非受控组件

Posted 2021-01-05 yiangli

　　在react中，组件内部主要是通过props和state来存储组件的属性与状态的。其中props是通过父组件传入，在组件内部不能进行修改。而state是保存可变状态的一个对象，通过this.setState方法进行修改，注意不能直接使用this.state.xx = ?来进行修改，这样是没有效果的。每一次setState后都会重新渲染组件。介绍完state后，我们开始介绍受控组件和非受控组件。

受控组件

受控组件，顾名思义是受到控制的组件，那么是通过什么来受到控制呢？

   <input value={this.state.inputValue} />

　　当input的value值为state.inputValue时，当用户对input进行操作时，没有对inputValue进行setState()操作，这个值不变，也就意味着input显示不变。但是如果我们给input一个事件，在事件中进行对state的修改，那么值会如何呢？

 inputChange = e => this.setState({value: e.target.value})    
render() {
    return (
        <input value="this.state.value" onChange={this.inputChange}/>
    )
}

　　在这里，每当用户输入时，input触发onChange事件，调用inputChange函数修改了value值。使用受控组件，每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入。

非受控组件

非受控组件不同于受控组件数据是react组件处理的，是通过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>
    );
  }
}

　　如官方文档中例子，此时将input通过ref暴露给组件，可以通过this.input进行访问。