React
Formulieren en gebruikersinvoer

Gecontroleerde componenten

Gecontroleerde formuliercomponenten worden gedefinieerd met een eigenschap value . De waarde van gecontroleerde ingangen wordt beheerd door React, gebruikersinvoer heeft geen directe invloed op de weergegeven invoer. In plaats daarvan moet een wijziging in de eigenschap value deze wijziging weerspiegelen.

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

Het bovenstaande voorbeeld laat zien hoe de eigenschap value de huidige waarde van de invoer definieert en de gebeurtenishandler onChange werkt de status van de component bij met de invoer van de gebruiker.

Formulieringangen moeten waar mogelijk als gecontroleerde componenten worden gedefinieerd. Dit zorgt ervoor dat de componentstatus en de invoerwaarde te allen tijde synchroon lopen, zelfs als de waarde wordt gewijzigd door een andere trigger dan een gebruikersinvoer.

Ongecontroleerde componenten

Niet-gecontroleerde componenten zijn ingangen die geen eigenschap value . In tegenstelling tot gecontroleerde componenten is het de verantwoordelijkheid van de toepassing om de componentstatus en de invoerwaarde synchroon te houden.

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

Hier wordt de status van de component bijgewerkt via de gebeurtenishandler onChange , net als voor gecontroleerde componenten. In plaats van een eigenschap value wordt echter een eigenschap defaultValue geleverd. Dit bepaalt de beginwaarde van de invoer tijdens de eerste weergave. Alle volgende wijzigingen in de status van het onderdeel worden niet automatisch weerspiegeld in de invoerwaarde; Als dit vereist is, moet in plaats daarvan een bestuurd onderdeel worden gebruikt.