如何防止 onBlur 事件触发？

Question

我正在尝试使用提供建议的下拉菜单来构建输入。 我有一个使用 onBlur 的输入元素，从技术上讲，当在外部单击时会删除 ul 元素。 当我单击 ul 元素时，它也会删除 ul 元素，这会在输入上触发 onBlur 事件。 有没有办法实现 onBlur 防止 ul 元素触发 onBlur 事件？

import React, { useState, useEffect, useRef } from "react";

import "./styles.css";

const Autocomplete = (props) => {
  const [userInput, setUserInput] = useState("");

  const [listResults, setListResults] = useState([]);

  const [openModal, setOpenModal] = useState(false);

  useEffect(() => {
    const filteredResults = props.options.filter((option) =>
      option.includes(userInput)
    );

    setListResults(filteredResults);
  }, [userInput, props.options]);

  const handleInput = (event) => {
    setUserInput(event.target.value);
  };

  const handleInputClick = () => {
    setOpenModal(!openModal);
  };

  const handleClickOption = (data) => {
    setUserInput(data);
    setOpenModal(false);
    ulEl.current.focus();
  };

  return (
    <div className="container">
      <input
        name="search-input"
        value={userInput}
        onChange={handleInput}
        autoComplete="off"
        onFocus={handleInputClick}
        onBlur={handleInputClick}
      />
      <ul className="search-list">
        {openModal &&
          listResults &&
          listResults.map((data, key) => (
            <li
              key={key}
              onClick={() => {
                handleClickOption(data);
              }}
            >
              {data}
            </li>
          ))}
      </ul>
    </div>
  );
};

export default Autocomplete;

任何帮助将不胜感激

Answer 1

简短的回答，只需将其添加到您的元素中

onMouseDown={(e) => e.preventDefault()}

在这种情况下，请在onMouseDown事件上调用event.preventDefault() 。 onMouseDown默认会触发 blur 事件， preventDefault时不会触发。 然后， onClick将有机会被调用。 模糊事件仍然会发生，仅在onClick之后。

Answer 2

您可以将<input>的list属性与<datalist>一起使用，而不是使用<ul> 。

希望这适合你的情况。