Компонент ввода React пытается использовать e.preventdefault () для предотвращения отправки формы, устанавливая его при вводе и форме, оба не работают

Question

У меня есть панель поиска React, и я пытаюсь предотвратить отправку формы или ее повторную визуализацию, если пользователь нажимает клавишу ввода.

Я прочитал о событиях response syntheti c и применил этот logi c как для обработчика obSubmit для элемента формы, так и для элемента ввода, ни один из них не работает при применении индивидуально к каждому элементу или при применении к обоим, и я не уверен, почему.

Expected behavior: If a user clicks enter nothing will happen, no clearing of the input text or form submission

Current behavior: User clicks enter, text field is cleared and form is submitted triggering a re render

Вот снимок моего текущего Компонента:

  const handleSubmit = event => {
    event.preventDefault();
  };

return (
    <form onSubmit={handleSubmit}>
      <StyledInput className={"inputWithIcon"}>
        <Input
          type="text"
          value={text}
          onChange={handleChange}
          placeholder="Search"
          onSubmit={e => {
            e.preventDefault();
          }}
        />
        <div className="left-icon">
          <svg viewBox="0 0 24 24" width="36px" height="36px">
             ...
          </svg>
        </div>

        <button className="right-icon" onClick={clearInput}>
          <svg width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
             ...
          </svg>
        </button>
      </StyledInput>
    </form>
)

И CodeSandbox, демонстрирующий проблему:

Answer 1

Вам нужно добавить type="button" к вашей кнопке очистки. Что происходит, так это то, что эта кнопка интерпретируется как кнопка отправки, поэтому, когда вы нажимаете Enter, она запускает вашу функцию clearInput.

<button className="right-icon" type="button" onClick={clearInput}> должно решить вашу проблему очистки.

Передача onSubmit в форме заставит ее реагировать на любое нажатие Enter. Если вы хотите сохранить это, но не отправлять при вводе, вам придется добавить охрану к функции handleSubmit.

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