受控元件

受控表單元件使用 value 屬性定義。受控輸入的值由 React 管理，使用者輸入不會對呈現的輸入產生任何直接影響。相反，對 value 屬性的更改需要反映這種變化。

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: ''
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}

上面的示例演示了 value 屬性如何定義輸入的當前值，onChange 事件處理程式使用使用者的輸入更新元件的狀態。

表格輸入應儘可能定義為受控元件。這可以確保元件狀態和輸入值始終保持同步，即使該值是由使用者輸入以外的觸發器更改的。