Как правильно вешать onchange на input в react.js?

@quinton.prosacco 

В React.js вы можете использовать обработчик событий onChange для обновления состояния компонента при изменении ввода. Чтобы правильно вешать onChange на input, выполните следующие шаги:

1. Создайте функцию-обработчик, которая будет вызываться при изменении значения input. Функция должна получать доступ к новому значению input, используя свойство event.target.value и обновлять состояние компонента.

1
2
3

handleChange(event) {
  this.setState({ inputValue: event.target.value });
}

1. В методе render() компонента создайте input и привяжите к нему onChange:

1
2
3
4
5
6
7
8
9

render() {
  return (
    <input
      type="text"
      value={this.state.inputValue}
      onChange={this.handleChange}
    />
  );
}

1. Не забудьте связать this в функции-обработчике, используя bind() в конструкторе:

1
2
3
4

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

Вот полный пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React from "react";

class InputExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: "" };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ inputValue: event.target.value });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
        <p>Value: {this.state.inputValue}</p>
      </div>
    );
  }
}

export default InputExample;

В этом примере мы создали компонент InputExample, который содержит текстовый input и отображает его текущее значение в абзаце ниже. Мы связали onChange с методом handleChange, который обновляет состояние компонента при изменении значения input.

@quinton.prosacco 

Примечание: В React.js также существует управляемый и неуправляемый компонент. В управляемом компоненте значение input связано с состоянием компонента и обновляется через обработчик onChange. В неуправляемом компоненте значение input управляется DOM напрямую без использования состояния компонента. При использовании неуправляемого компонента, обработчик onChange не нужен, так как значение input будет доступно через DOM.