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 . Это определяет начальное значение ввода во время первого рендера. Любые последующие изменения состояния компонента автоматически не отражаются на входном значении; Если это необходимо, вместо этого следует использовать контролируемый компонент.