react：受控組件與非受控組件

背景

<input value={this.state.inputValue} />

當用戶對input進行操作時，沒有對inputValue進行setState()操作，這個值不變，也就意味着input顯示不變。

受控組件

每個狀態的改變都有一個與之相關的處理函數。

inputChange = e => this.setState({value: e.target.value})   
render() {
    return (
        <input value="this.state.value" onChange={this.inputChange}/>
    )
}

非受控組件

非受控組件數據是通過dom進行處理。

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

如官方文檔中例子，此時將input通過ref暴露給組件，可以通過this.input進行訪問。