React中什么是受控组件和非控组件?

在React中,表单元素的行为分为两种类型:受控组件(Controlled Components)和非受控组件(Uncontrolled Components)。

受控组件:在受控组件中,表单数据由React组件的state管理。也就是说,表单输入的值会与组件的state同步,每当状态变化时,都会触发一个函数(通常是onChange),然后在该函数中更新状态。这样,React组件就始终控制了输入的状态。

例如,一个简单的受控组件可能是这样的:

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

    this.handleChange = this.handleChange.bind(this);
  }

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

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

非受控组件:非受控组件则是让表单数据由DOM自身来管理,而不是存储在React组件的state中。通过使用ref来从DOM元素中获取表单值,而不是为每次键盘敲击都编写事件处理程序。

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit

发表评论

后才能评论