如何使 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() 。 让事件传播通常是一个好主意，除非用户有意在某些用例中阻止它。