如何使event.stopPropagation（）对于表单内的输入字段起作用？

Question

我有一个带有一些输入字段的表格。字段之一用于设置标签。每当用户点击Enter时，我都希望添加标签。

一切正常。我的问题是，当用户按下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()。除非用户有意在某些用例中阻止事件发生，否则最好进行事件传播。