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

Моя проблема в том, что у меня есть настройка формы и все, и мой обработчик отправки работает должным образом, но я не могу захватить клавишу ввода для этого вообще!

Сначала у меня есть функция отправки, как это:

  onSubmit(e) {
    e.preventDefault();
    this.state.socket.emit('message', this.state.message);
    console.log('emitted');
    this.setState(
      {
        message: '',
      },
      () => {
        // e.target.value = '';
        console.log('state should be cleared.');
      },
    );
  }

И моя форма, как это:

<Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

Я попытался сделать это с помощью решения, найденного здесь: github реагировать на редуксы форм вопрос .

Но безрезультатно, я все еще получаю обновленную страницу .....

0
Chris Rutherford 15 Апр 2019 в 23:32

2 ответа

Лучший ответ

Прослушайте onSubmit в форме, а не onclick на кнопке. По умолчанию кнопки имеют тип «отправить», поэтому, нажав на них или нажав «Ввод» внутри текстового поля, вы отправите форму.

<Form onSubmit={this.onSubmit}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton">
          Send
       </Button>
     </div>
  </FormGroup>
</Form>
0
Ross Allen 15 Апр 2019 в 21:56

Рефакторинг это:

<Form>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <Button className="chatBoxButton" onClick={this.onSubmit}>
          Send
       </Button>
     </div>
  </FormGroup>
</Form>

В это:

Послать

Так откуда я взял handleSubmit? Хорошо, если вы сделаете console.log(this.props); здесь:

render() {
  console.log(this.props);
  return (
    <Form onSubmit={this.props.handleSubmit(this.onSubmit)}>
 <FormGroup>
   <div className="chatBoxRow2">
      <input
         type="text"
         name="message"
         onChange={this.onChange}
         value={this.state.message}
         className="chatBoxOut"
       />
       <button className="chatBoxButton">Send</button>
     </div>
  </FormGroup>
</Form>
  )
}

Вы обнаружите огромное количество свойств внутри этого props объекта в Redux Form, в частности одно из них называется handleSubmit, и это функция, которую мы должны вызывать каждый раз, когда ваша форма отправляется и предоставляется по форме Redux.

Хорошо, но почему бы не просто onSubmit={this.onSubmit}? Короткий ответ: потому что сейчас вы используете Redux Form.

Этот новый процесс вызова onSubmit={this.props.handleSubmit(this.onSubmit)} изменит способ вызова onSubmit.

Так что вместо:

onSubmit(event) {
  event.preventDefault();
}

Теперь вы можете:

onSubmit(formValues) {

}

Вы видите, что вам больше не нужно иметь дело с объектом event, вместо этого он будет вызываться со всеми значениями из вашей формы. Поэтому handleSubmit обрабатывает event.preventDefault() за занавесом, оставляя наш onSubmit() обратный вызов для вызова с formValues.

0
Daniel 16 Апр 2019 в 04:05