谈谈react受控组件和非受控组件

区分

1. 判断一个组件是否是受控组件，看这个组件是否受react状态控制。

2. 在react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）但是也可以转化成受控组件，就是通过 onChange事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。

受控组件

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

代码如下👇

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

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

代码如下👇

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

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

非受控组件

非受控组件不同于受控组件数据是react组件处理的，是通过dom自己内部进行处理。

代码如下👇

class Example extends React.Component {
  handleSubmit = (e) => {
    console.log(this.input.value);
    e.preventDefault();
  }

  render() {
    return (
      <>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={handleSubmit}>提交</button>
      </>
    );
  }
}

此时将input通过ref暴露给组件，可以通过this.input进行访问。

扫码关注