react 受控与非受控理解

React中的受控组件和非受控组件是两种处理表单数据的方式。

受控组件是指由React来管理表单元素的状态和值。在受控组件中，表单元素的值由React的状态(state)来控制，当用户输入数据时，React会更新状态并重新渲染组件。通过使用onChange事件处理函数，可以监听表单元素的变化并更新状态。

例如，一个受控的文本输入框可以这样定义：

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

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

在上面的例子中，文本输入框的值由React的状态value控制，当用户输入时，handleChange函数会更新状态value并重新渲染组件。

相反，非受控组件是指由DOM本身来管理表单元素的状态和值。在非受控组件中，表单元素的值由DOM直接处理，React不控制其状态。我们可以通过ref来获取表单元素的值。

以下是一个非受控文本输入框的示例：

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Input Value:', this.inputRef.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

在上面的例子中，我们使用了ref来获取文本输入框的值，并在表单提交时打印出输入的值。

总而言之，受控组件适用于需要对表单数据进行精确控制和验证的场景，而非受控组件适用于简单的表单操作。