React
Vormen reageren

Gecontroleerde componenten

Een bestuurd onderdeel is gebonden aan een waarde en de wijzigingen worden in code verwerkt met behulp van op gebeurtenissen gebaseerde callbacks.

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

In dit voorbeeld initialiseren we de status met een leeg persoon-object. Vervolgens binden we de waarden van de 2 ingangen aan de afzonderlijke sleutels van het personobject. Vervolgens, terwijl de gebruiker typt, leggen we elke waarde vast in de functie handleChange . Aangezien de waarden van de componenten gebonden zijn aan de status, kunnen we de gebruiker typen door setState() aan te roepen.

OPMERKING: Als u setState() niet setState() wanneer het om gecontroleerde componenten gaat, zal de gebruiker typen, maar de invoer niet zien omdat React alleen wijzigingen weergeeft wanneer hem wordt gevraagd dit te doen.

Het is ook belangrijk op te merken dat de namen van de ingangen hetzelfde zijn als de namen van de sleutels in het personobject. Hiermee kunnen we de waarde in woordenboekvorm vastleggen, zoals hier te zien.

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] is hetzelfde is een person.firstName || person.lastName . Natuurlijk hangt dit af van de invoer die momenteel wordt ingevoerd. Omdat we niet weten waar de gebruiker gaat typen, kunnen we met behulp van een woordenboek en het vergelijken van de invoernamen met de namen van de toetsen de invoer van de gebruiker vastleggen kwestie waar de onChange vandaan komt.