Двустороннее связывание данных (Two-way Data Binding) - это паттерн, который позволяет связывать изменения значения элемента пользовательского интерфейса (например, текстового поля) с соответствующим значением в состоянии компонента, и наоборот.

В HTML элементы формы, такие как <input>, <textarea> и <select>, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов state и обновляется только через вызов setState()

Мы можем скомбинировать оба подхода и сделать состояние React-компонента «единственным источником правды, SSOT». Тогда React-компонент будет рендерить форму и контролировать её поведение в ответ на пользовательский ввод. Значение элемента формы input в этом случае будет контролировать React, а сам элемент будет называться «управляемый компонент».

В React для реализации двустороннего связывания данных используется обработчик событий onChange и управляемые компоненты (Controlled Components).

Управляемые компоненты - это компоненты, у которых значение определяется не пользователем, а компонентом самим. Для управляемых компонентов значение определяется в состоянии компонента, а не в DOM-элементе, и обновляется только через изменение состояния.

Вот пример реализации двустороннего связывания данных для текстового поля в React:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleChange = this.handleChange.bind(this);
  }
 
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
 
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <p>Value: {this.state.value}</p>
      </div>
    );
  }
}

Здесь мы создаем компонент MyComponent, который содержит текстовое поле и отображает его значение в параграфе ниже. Значение текстового поля определяется в состоянии компонента (this.state.value), и при каждом изменении его значения через обработчик события onChange, состояние компонента обновляется через this.setState({ value: event.target.value }).

Таким образом, изменения в текстовом поле отражаются на значении в состоянии компонента, и наоборот. Это позволяет нам реализовать двустороннее связывание данных в React с помощью управляемых компонентов и обработчиков событий.

Назад