React
Реагировать на формы

Контролируемые компоненты

Управляемый компонент привязан к значению, и его изменения обрабатываются кодом, используя обратные вызовы, основанные на событиях.

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

}

В этом примере мы инициализируем состояние с пустым человеческим объектом. Затем мы связываем значения двух входов с отдельными ключами объекта person. Затем, когда пользователь вводит данные, мы handleChange каждое значение в функции handleChange . Поскольку значения компонентов привязаны к состоянию, мы можем повторно получить, как пользователь вводит, вызывая setState() .

ПРИМЕЧАНИЕ. Не вызов setState() при работе с контролируемыми компонентами приведет к тому, что пользователь напечатает, но не увидит вход, потому что React только изменяет, когда ему говорят об этом.

Также важно отметить, что имена входов такие же, как имена ключей в объекте person. Это позволяет нам фиксировать значение в форме словаря, как показано здесь.

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

person[event.target.name] - это тот же самый person.firstName || person.lastName . Конечно, это будет зависеть от того, какой вход вводится в настоящее время. Поскольку мы не знаем, где пользователь будет печатать, используя словарь и сопоставляя имена ввода с именами ключей, мы можем зафиксировать ввод пользователя no вопрос, из которого вызывается onChange.