React
フォームとユーザー入力

制御されたコンポーネント

制御されたフォームコンポーネントは、 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イベントハンドラがコンポーネントの状態をユーザの入力で更新する方法を示していvalue 。

フォーム入力は、可能であれば、制御されたコンポーネントとして定義する必要があります。これにより、ユーザー入力以外のトリガーによって値が変更されても、コンポーネントの状態と入力値が常に同期します。

制御されていないコンポーネント

制御されていないコンポーネントは、 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イベントハンドラを介して更新されます。ただし、 valueプロパティの代わりにdefaultValueプロパティが指定されています。これは、最初のレンダリング中に入力の初期値を決定します。コンポーネントの状態に対するその後の変更は、入力値によって自動的に反映されません。これが必要な場合は、制御されたコンポーネントを代わりに使用する必要があります。