React
Formulär och användarinmatning

Kontrollerade komponenter

Kontrollerade formkomponenter definieras med en value . Värdet på kontrollerade ingångar hanteras av React, användaringångar kommer inte att ha något direkt inflytande på den återgivna ingången. Istället en ändring av value egendom måste återspegla denna förändring.

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

Exemplet ovan visar hur value definierar det aktuella värdet på ingången och onChange händelseshanteraren uppdaterar komponentens tillstånd med användarens ingång.

Forminsignaler ska definieras som kontrollerade komponenter där det är möjligt. Detta säkerställer att komponenttillståndet och ingångsvärdet är synkroniserade hela tiden, även om värdet ändras av en annan trigger än en användarinmatning.

Okontrollerade komponenter

Okontrollerade komponenter är ingångar som inte har en value . I motsats till kontrollerade komponenter är det applikationens ansvar att hålla komponenttillståndet och ingångsvärdet synkroniserat.

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

Här är komponentens tillstånd uppdateras via onChange händelsehanteraren, precis som för kontrollerade komponenter. Men i stället för ett value egendom, en defaultValue är egendom levereras. Detta bestämmer ingångets initiala värde under den första renderingen. Eventuella efterföljande ändringar av komponentens tillstånd reflekteras inte automatiskt av ingångsvärdet; Om detta krävs bör en kontrollerad komponent användas istället.