React
Formularze i dane wejściowe użytkownika

Kontrolowane komponenty

Kontrolowane komponenty formularza są definiowane za pomocą właściwości value . Wartością kontrolowanych danych wejściowych zarządza React, dane wejściowe użytkownika nie będą miały bezpośredniego wpływu na renderowane dane wejściowe. Zamiast tego zmiana właściwości value musi odzwierciedlać tę zmianę.

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>
    )
  }
}

Powyższy przykład pokazuje, w jaki sposób value właściwość określa wartość prądu na wejściu i onChange obsługi zdarzeń aktualizuje stan składnika z wejścia użytkownika.

W miarę możliwości dane wejściowe formularza należy definiować jako komponenty kontrolowane. Zapewnia to, że stan komponentu i wartość wejściowa są zsynchronizowane przez cały czas, nawet jeśli wartość jest zmieniana przez wyzwalacz inny niż dane wprowadzone przez użytkownika.

Niekontrolowane komponenty

Niekontrolowane komponenty to dane wejściowe, które nie mają właściwości value . W przeciwieństwie do kontrolowanych komponentów, na aplikacji spoczywa obowiązek utrzymywania synchronizacji stanu komponentu i wartości wejściowej.

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>
    )
  }
}

Tutaj stan komponentu jest aktualizowana poprzez onChange obsługi zdarzeń, podobnie jak w przypadku komponentów sterowanych. Jednak zamiast value nieruchomości, o defaultValue nieruchomość jest dostarczany. Określa początkową wartość danych wejściowych podczas pierwszego renderowania. Wszelkie późniejsze zmiany stanu składnika nie są automatycznie odzwierciedlane przez wartość wejściową; Jeśli jest to wymagane, zamiast tego należy użyć kontrolowanego komponentu.