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

Question

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

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

这是我的表格:

      <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} ... > 。所以现在按 Enter 键将直接调用该函数。还添加

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

这将确保 onSubmit 不会触发您的 handleSubmit功能。

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