чтобы вызвать событие onChange после нажатия клавиши Enter

клавишей введите когда фокус на элементе управления формой (вход) обычно вызывает submit (onSubmit) событие на самой форме (не вход), чтобы вы могли привязать свой this.handleInput к форме onSubmit.

кроме того, вы можете привязать его к blur (onBlur) событие на input что происходит при удалении фокуса (например, переход к следующему элементу, который может получить фокус)

вы можете использовать onKeyPress непосредственно на поле ввода. функция onChange изменяет значение состояния при каждом изменении поля ввода, и после нажатия Enter она вызовет функцию search().

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

можно использовать event.key

function Input(props) {
  return (
    <div>
      Input
      <input type="text" onKeyPress={props.onKeyPress}/>
    </div>
  )
}

class Form extends React.Component {
  constructor(props) {
    super(props)

    this.handleKeyPress = this.handleKeyPress.bind(this)
  }

  handleKeyPress(event) {
    if (event.key === 'Enter') {
      console.log('enter key pressed')
    }
  }

  render() {
    return (
      <section>
        <Input onKeyPress={this.handleKeyPress}/>
        <Output value={this.state.output}/>
      </section>
    );
  }
}

реагируют пользователи, вот ответ для полноты.

реагировать версия 16.4.2

вы либо хотите обновить для каждого нажатия клавиши, либо получить значение только при отправке. Добавление ключевых событий в компонент работает, но есть альтернативы, рекомендованные в официальных документах.

контролируемые и неконтролируемые компоненты

контролируемые

от Docs-формы и управляемые компоненты:

в HTML, элементы формы, такие как ввод, textarea, и выберите обычно поддерживайте свое собственное состояние и обновляйте его на основе пользовательского ввода. In React, изменяемое состояние-это, как правило, хранится в государственной собственности компонентов, и только обновляется с помощью setState ().

мы можем объединить их, сделав состояние реакции " единственным источником правды". Затем компонент React, который также отображает форму контроли что происходит в этой форме при последующем вводе пользователем. Форма ввода элемент, значение которого контролируется React таким образом называется a "компоненты управления."

если вы используете управляемый компонент, вам нужно будет обновлять состояние для каждого изменения значения. Для этого необходимо привязать обработчик событий к компоненту. В примерах документов, как правило, событие onChange.

пример:

1) привязать обработчик событий в конструктор (значение хранится в состоянии)

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
}

2) создать функцию-обработчик

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

3) создать форму отправить функцию (значение берется из состояния)

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

4) вынести

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="Submit" />
</form>

если вы используете контролируемые компоненты, ваш handleChange функция всегда будет уволена, для того чтобы уточнить и сдержать правильное положение. Состояние всегда будет иметь обновленное значение, и когда форма будет отправлена, значение будет принято от государства. Это может быть con, если ваша форма очень длинная, потому что вам нужно будет создать функцию для каждого компонента или написать простой, который обрабатывает изменение значения каждого компонента.

неконтролируемое

С Docs-неконтролируемый компонент

в большинстве случаев мы рекомендуем использовать управляемые компоненты для реализации формы. В управляемом компоненте данные формы обрабатываются с помощью React деталь. Альтернативой являются неконтролируемые компоненты, где формируются данные обрабатывается самим DOM.

для записи неконтролируемого компонента, вместо записи события обработчик для каждого обновления состояния можно использовать ссылку для получения значений формы из дома.

главное отличие здесь в том, что вы не используете , а onSubmit формы, чтобы получить значения, и проверить, если обязательно.

пример:

1) привязать обработчик событий и создать ref для ввода в конструктор (нет значения, сохраненного в состоянии)

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
}

2) создать функцию отправки формы (значение берется из компонента DOM)

handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
}

3) оказывать

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" ref={this.input} />
    </label>
    <input type="submit" value="Submit" />
</form>

если вы используете неконтролируемое компоненты, нет необходимости связывать