如何阻止内部 onClick 事件传播到 React 中的外部 onSubmit 事件？

Question

我有一个 React 应用程序，我在其中从 Unsplash api 检索数据。我实现了一个带有多个输入字段和按钮的表单，以便从此 api.

请求数据

除了我的输入字段，我还创建了一个按钮并在 onClick 事件上传递了一个函数 clearInputField，它只需单击一下即可清除输入字段的值。但是，在此实施之后，事件开始冒泡并触发 onSubmit 我在表单上的事件。为了防止这种行为，我在 clearInputField 函数中传递了 e.preventDefault() 。

现在一切正常，除了我不能使用 ENTER 键，如果我想触发表单提交。相反，ENTER 键现在触发 clearInputField 函数。

在给定的情况下，我如何才能保留 clearInputField 函数的功能，同时让 ENTER 键触发 onSubmit 事件？

export const SearchImages = (props) => {
  const [query, setQuery] = useState("");
  const [images, setImages] = useState([]);
  const [imagesTotal, setImagesTotal] = useState(0);
  const [inputError, setInputError] = useState(false);
  const [noResultsError, setNoResultsError] = useState(false);
  const [excessInputError, setExcessInputError] = useState(false);
  const [topLoader, setTopLoader] = useState(false);
  const [bottomLoader, setBottomLoader] = useState(false);
  const focusOnSearch = useRef(null);


  const handleSubmit = (e) => {
    if (query.length === 0) {
      e.preventDefault();
      setInputError(true);
    } else if (query.length > 50) {
      e.preventDefault();
      setInputError(false);
      setExcessInputError(true);
    } else {
      setInputError(false);
      setExcessInputError(false);
      setTopLoader(true);
      searchPhotos(e);
      props.addSavedQuery(query);
    }
  };


  const searchPhotos = async (e) => {
    e.preventDefault();
    setNoResultsError(false);
    UnsplashAccessKey.search
      .photos(query, 1, 10)
      .then(toJson)
      .then((json) => {
        setTopLoader(false);
        setImagesTotal(json.total);
        if (json.results <= 0) {
          setNoResultsError(true);
        } else {
          setImages(json.results);
        }
      });
  };

  const clearInputField = (e) => {
    e.preventDefault();
    setQuery("");
    stopPropagation(e);
  };

  return (
      <form className="search-form" onSubmit={handleSubmit}>
        <div className="search-form__input--wrapper">
          <input
            type="text"
            name="query"
            placeholder='Use keywords, ex: "phone"'
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            ref={focusOnSearch}
            className="search-form__input"
          />
          <button className="search-form__btn--clear" onClick={clearInputField}>
            &#88;
          </button>
        </div>

        <button type="submit" className="search-form__btn--submit">
          Search
        </button>
        <span
          className="search-form__warning"
          style={
            inputError || excessInputError
              ? { display: "block" }
              : { display: "none" }
          }>
          {inputError
            ? "The search field should not stay empty!"
            : "" || excessInputError
            ? "50 characters max length exceeded. Use concise keywords. This is not a poetry app!"
            : ""}
        </span>
      </form>
}

Answer 1

使用事件的stopPropagation方法。

e.stopPropagation();

Answer 2

尝试添加type="button"

<button className="search-form__btn--clear" type="button" onClick={clearInputField}>
  &#88;
</button>

如何阻止内部 onClick 事件传播到 React 中的外部 onSubmit 事件？

How to stop inner onClick event's propogating into outer onSubmit event in React?

event-handling

reactjs