React 受控组件

在 React 中，有两种组件类型：受控组件和非受控组件。受控组件是指其表单值由 React 管理的表单元素。在受控组件中，表单值存储在组件的 state 中，并通过 props 将回调函数传递到表单元素中。

受控组件的优点

1. 可预测性高: 受控组件的值始终由状态/属性管理，因此它们的行为可以更容易地理解和预测。非受控组件可以更方便，但它们的行为需要更多的手动控制。

2. 可控制性更好: 由于表单值存储在状态中，因此更容易对其进行控制和修改，对于一些复杂的表单交互，通过设置 state，使得表单内容也更容易进行分步处理

3. 同步更简单：当表单输入值更改时，会更新组件中的状态，组件的状态更改会更新表单中的输入值，从而保持其同步。由于使用了 React 的语法糖，这种同步更加简单。

4. 更容易与其他组件交互: 受控组件的属性和状态显而易见，可以被其他组件发现并使用，更易与其他组件交互。

5. 更容易测试: 受控组件的行为容易预测，因此更容易进行测试。

受控组件的实现

在 React 中，受控组件的实现基于以下步骤：

1. 在组件中，声明 state 来存储表单的值。

2. 更新 state 中表单的值（通过 setState() 函数）和处理表单提交（通过 handleSubmit() 函数）的函数应该通过事件处理程序绑定到表单元素。

3. 在表单元素上设置value属性和捕获 onChange 事件（或者其他表单事件）。

import React from 'react'

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default ControlledComponent

总结

通过使用 React 的语法糖，受控组件的实现变得容易而优雅。如果你正在构建一个表单的话，强烈建议使用受控组件来提高可预测性和可控制性，并使其更易于测试和交互。