せいぎょはんのうき

4843 ワード
React テキストリンク

棚


全体的に、<input type="text">、<textarea>、および<select>の性能は非常に近い.すべての実施制御素子は、value回のツリー図を行うことができる.
に注意selectタグが複数のオプションを許可する場合、配列はvalueツリーに転送され得る.
<select multiple={true} value={['B', 'C']}>

複数入力の制御


複数のinput画層を制御する必要がある場合、name画層を各画層に追加し、event.target.name値によりHandlerに実行する操作を選択させることができる.
次に例を示します.
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

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

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"            
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"            
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}
ES 6のcomputed property name構文は、指定された入力ラベルの名前に一致するstateを更新するために使用される.
this.setState({
  [name]: value});
ES 5コードは以下の通りです.
var partialState = {};
partialState[name] = value;
this.setState(partialState);
また、setState()は特定のステータスを現在のステータスにマージを自動的に呼び出すので、変更した部分を呼び出すだけでよい.
キューのリニアインプリメンテーション
select-related, prefetch-related