React
React Forms

Kontrollerade komponenter

En kontrollerad komponent är bunden till ett värde och dess förändringar hanteras i kod med händelsebaserade återuppringningar.

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

}

I det här exemplet initialiserar vi tillstånd med ett tomt personobjekt. Vi binder sedan värdena på de 2 ingångarna till de individuella nycklarna för personobjektet. Sedan som användaren skriver, fångar vi varje värde i handleChange . Eftersom värdena på komponenterna är bundna till status kan vi återlämna som användaren skriver genom att ringa setState() .

OBS: Att inte ringa setState() vid hantering av kontrollerade komponenter kommer att göra att användaren skriver, men ser inte ingången eftersom React endast gör ändringar när det får höra att göra det.

Det är också viktigt att notera att namnen på ingångarna är desamma som namnen på tangenterna i personobjektet. Detta gör att vi kan fånga värdet i ordbokform som visas här.

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

person[event.target.name] är samma är en person.firstName || person.lastName . Naturligtvis beror detta på vilken inmatning som för närvarande skrivs in. Eftersom vi inte vet var användaren ska skriva, använder en ordlista och matchar inmatningsnamnen med namnen på tangenterna, gör att vi kan fånga in användarinmatningen nr oavsett var onChange kallas ifrån.