时间戳

首页 > 解决方案 > 如何防止输入字段上的按键事件冒泡到表单？

reactjs - 如何防止输入字段上的按键事件冒泡到表单？

问题描述

我有一个表单，其中一个字段允许用户添加标签。我想构建它，因此可以通过单击输入来添加标签。问题是，每当单击输入时，都会添加标签，但表单也会认为它正在提交。我该如何防止它，所以只有在单击提交按钮时才会提交表单？

这是我的表格：

<form>

            <div className="tiny-margin-bottom medium-margin-top">
              <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">
                {values && values.tags ? renderTags(values.tags) : null}
              </div>
            </div>

            {formError ? (
              <div className="form-error small-margin-top">
                Please fill out all three fields
              </div>
            ) : null}
            <div className="popup__button medium-margin-top">
              <button className="boxed-button " onClick={handleSubmit}>
                Launch
              </button>
            </div>
          </form>

这是我正在尝试使用的两种方法-

这是在单击输入时使用的（应该​​为输入字段提供服务）：

  const handleKeyPress = event => {
    if (event.key === "Enter") {
      if (!(values && values.tags)) values.tags = [];
      if (values.tags.includes(tagInput) || !tagInput.length) return;
      setValues({ tags: [...values.tags, tagInput.toLowerCase()] });
      setTagInput("");
    }
  };

这个是提交的：

  const handleSubmit = event => {
    event.preventDefault();
    if (!!values.title && values.country && values.lang) {
      setSubmitting(true);
      newProject(values, setSubmitting);
    } else {
      setFormError(true);
    }
  };

我也尝试将此作为 onKeyPress 的操作：

onKeyPress={e => {
handleKeyPress(e) && e.preventDefault();
}}

但它不起作用。

编辑：

根据杰伊的建议（如果我使用正确的话），我尝试了以下方法，但仍然无法解决：

  const handleKeyPress = event => {
    event.stopPropagation();
    if (event.key === "Enter") {
      if (!(values && values.tags)) values.tags = [];
      if (values.tags.includes(tagInput) || !tagInput.length) return;
      setValues({ tags: [...values.tags, tagInput.toLowerCase()] });
      setTagInput("");
    }
    return false;
  };

标签： reactjsevent-handling

解决方案

您可以使用event.stopPropagation();来阻止事件冒泡： 

const handleKeyPress = event => {
    event.stopPropagation(); // <-----add this line

或者你可以return false;从处理程序，因为它可以为你做两件事：

  • event.preventDefault()
  • event.stopPropagation()

您可以在此行之后添加它： 

setTagInput("");
return false; //<-------here it will work only if enter is pressed

推荐阅读