Двустороннее связывание данных (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 с помощью управляемых компонентов и обработчиков событий.

Назад