如何使 event.stopPropagation() 用于表单内的输入字段？

Question

我有一个包含几个输入字段的表单。其中一个字段用于设置标签。每当用户按下回车键时，我都希望添加标签。

一切正常。我的问题是，当用户按下回车键时，事件传播到表单并且表单认为它正在提交。我不希望发生这种情况。我希望仅在单击指定的提交按钮时才提交表单。

这是我的表格：

      <form>

        <div className="tiny-margin-bottom medium-margin-top">
          <div className="tags__container">
            <InputField
              type="text"
              placeHolder="Add tags that are related to your business (for example 'Restaurant')"
              value={tagInput}
              onChange={setTagInput}
              onKeyPress={handleKeyPress}
              label="Hit 'Enter' to save tags"
            />
            <div className="tags__submit" onClick={addTag}>
              &rarr;
            </div>
          </div>

          <div className="tags">
            {values && values.tags ? renderTags(values.tags) : null}
          </div>
        </div>


        <div className="popup__button medium-margin-top">
          <button className="boxed-button " onClick={handleSubmit}>
            Create Project
          </button>
        </div>
      </form>

这是我的两个功能：

当在输入字段中按下回车时：

  const handleKeyPress = event => {
    event.stopPropagation();
    if (event.key === "Enter") {
      addTag();
      return false;
    }
  };

表单提交：

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

    switch (true) {
      case !values.title:
        setFormError("Please give your project a title");
        break;

      case !values.country:
        setFormError("Please choose the country of your target audience");
        break;

      case !values.lang:
        setFormError("Please choose the language of your target audience");
        break;

      case values && values.tags && values.tags.length >= 3:
        setFormError("Please add at least 3 tags");
        break;

      default:
        setSubmitting(true);
        newProject(values, setSubmitting);
        setFormError(null);
        break;
    }
  };

Answer 1

对于标签：
添加<form onSubmit={addLabelFunction} ... >。所以现在点击回车将直接调用这个函数。还要加上

<button 
  type="button" 
  ...
/>

这将确保 onSubmit 不会触发您的 handleSubmit 函数。

理想情况下，您可以删除 event.stopPropogation()。让事件传播通常是个好主意，除非用户有意为某些用例阻止它。

如何使 event.stopPropagation() 用于表单内的输入字段？

How can I make event.stopPropagation() work for an input field inside a form?

javascript

event-handling

keyboard-events

dom-events

reactjs