反应输入组件尝试使用 e.preventdefault() 来阻止表单提交，将其设置在输入和表单上都不起作用

Question

我有一个 React 搜索栏，如果用户单击输入，我试图阻止表单提交或重新呈现。

我阅读了反应合成事件并将该逻辑应用于表单元素和输入元素的 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"添加到清除按钮。 发生的事情是那个按钮被解释为提交按钮，所以当你按下回车键时，它会触发你的clearInput function。

<button className="right-icon" type="button" onClick={clearInput}>应该可以解决您的清除问题。

将onSubmit传递给表单将使其响应任何输入压力。 如果您想保留它，但避免在输入时提交，则必须在句柄提交handleSubmit中添加保护。

另一种方法是将所有内容包装在一个普通的 div 中，并将handleSubmit仅添加到您希望负责提交表单的元素中。