onChange реагирует на вызовы событий функцией с параметрами, но аргументы не передаются?

Question

Мне не совсем понятно, как озаглавить этот вопрос. Мой вопрос - более базовый c уровень понимания, чем актуальная проблема. Я новичок, чтобы реагировать. Я не понимаю эту функцию компонента ниже в строке:

<input type='text' name='myinput' value={this.state.input} onChange = {this.handleChange.bind(this)} />

эта вызываемая функция handleChange имеет параметр события, но что это за событие? Является ли событие больше просто ключевым словом реакции, чем фактическим аргументом? Не понимаю?

Полный компонент:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  // change code above this line
  render() {
    return (
      <div>
        {/* change code below this line */}
        <input
          type="text"
          name="myinput"
          value={this.state.input}
          onChange={this.handleChange.bind(this)}
        />
        {/* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
}

Полагаю, кто-нибудь может сломать, как это работает для меня? По логике я не понимаю?

Answer 1

Событие, которое вы получаете в функции onChange, является просто собственным событием, отправляемым браузером, когда происходит изменение.

Это в основном объект, который содержит некоторую информацию о вещи это только что произошло. В этом случае свойство target содержит элемент <input />. Таким образом, доступ к event.target.value даст вам значение элемента ввода.

Кроме того, он содержит другие данные / функции, которые вы можете использовать для управления тем, как браузер обрабатывает происходящее. Например, вы можете использовать preventDefault(), чтобы заблокировать поведение по умолчанию, которое может возникнуть при отправке события. Например, когда вы отправляете форму, вы, возможно, захотите остановить поведение по умолчанию, чтобы обрабатывать логи отправки c самостоятельно.

Подробнее об интерфейсе Event можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/API/Event

А конкретно о событии изменения: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

---

Кроме того, в конструкторе вы уже привязываете this к функции, поэтому вам не придется делать это снова. onChange={this.handleChange} должно работать просто отлично.