不受控制的元件

不受控制的元件是沒有 value 屬性的輸入。與受控元件相反，應用程式負責保持元件狀態和輸入值同步。

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

這裡，元件的狀態通過 onChange 事件處理程式更新，就像受控元件一樣。但是，提供 defaultValue 屬性而不是 value 屬性。這確定了第一次渲染期間輸入的初始值。元件狀態的任何後續更改都不會自動反映在輸入值中; 如果需要，則應使用受控元件。