React
Формы и пользовательский ввод
Поиск…
Контролируемые компоненты
Контролируемые компоненты формы определяются с помощью свойства value
. Значение управляемых входов управляется React, пользовательские входы не будут иметь прямого влияния на визуализированный вход. Вместо этого изменение свойства value
должно отражать это изменение.
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>
)
}
}
В приведенном выше примере показано, как свойство value
определяет текущее значение ввода, а onChange
события onChange
обновляет состояние компонента с помощью ввода пользователем.
Входы формы должны быть определены как контролируемые компоненты, где это возможно. Это гарантирует, что состояние компонента и входное значение постоянно синхронизируются, даже если значение изменяется с помощью триггера, отличного от пользовательского ввода.
Неконтролируемые компоненты
Неконтролируемые компоненты являются входами, которые не имеют свойства value
. В противоположность контролируемым компонентам, задача приложения заключается в сохранении состояния компонента и входного значения в синхронизации.
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>
)
}
}
Здесь состояние компонента обновляется через onChange
события onChange
, как и для контролируемых компонентов. Однако вместо свойства value
свойство defaultValue
. Это определяет начальное значение ввода во время первого рендера. Любые последующие изменения состояния компонента автоматически не отражаются на входном значении; Если это необходимо, вместо этого следует использовать контролируемый компонент.