onblur 事件阻止 onclick

Question

尝试选择下拉列表中的项目。 当我尝试单击该项目时，由于 onBlur，它没有单击。 我看到很多带有 onMouseDown 的解决方案，但很多人说这不是一个好的解决方案。也不喜欢超时的想法，这不是一个好的做法。

请使用 onClick 帮助找到此案例的解决方案

const [show, setShow] = useState(false);

const onBlur = (e)=>{
    setShow(false)
  }

<div className="dropdown"  onFocus={onFocus}>
      <input
        aria-expanded={show ? true : false}
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value)
          geoDataArr.length === 0 ? setShow(false) : setShow(true)
        }}
        onBlur={onBlur}
      />
      <div className={`dropdown-menu ${show ? "show" : ""}`}>
        {geoDataArr.map((item, i) =>(
          <li
            className="dropdown-item"
            key={i}
            onClick={e=>{
              setValue(e.target.dataset.city)
              // setShow(false)
            }}
            style={{cursor:"pointer"}}
            data-city={item.name}
          >
            <img src={`https://flagcdn.com/w40/${item.country.toLowerCase()}.png`} alt={item.country} />
            &nbsp;
            {item.name}
            &nbsp;
            {item.state}
          </li>
        ))}
      </div>
    </div>

Answer 1

如果您想使用 onClick 事件而不是 onMouseDown 来处理下拉列表中的项目选择，您可以按如下方式修改代码：

1.从输入元素中删除 onBlur 函数和 onBlur 事件处理程序。

const [show, setShow] = useState(false);

<div className="dropdown" onFocus={() => setShow(true)}>
  <input
    aria-expanded={show ? true : false}
    type="text"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
      geoDataArr.length === 0 ? setShow(false) : setShow(true);
    }}
  />
  <div className={`dropdown-menu ${show ? "show" : ""}`}>
    {geoDataArr.map((item, i) => (
      <li
        className="dropdown-item"
        key={i}
        onClick={(e) => {
          setValue(e.target.dataset.city);
          setShow(false);
        }}
        style={{ cursor: "pointer" }}
        data-city={item.name}
      >
        <img
          src={`https://flagcdn.com/w40/${item.country.toLowerCase()}.png`}
          alt={item.country}
        />
        &nbsp;
        {item.name}
        &nbsp;
        {item.state}
      </li>
    ))}
  </div>
</div>

在此更新的代码中，onBlur 事件和 onBlur 处理程序已从输入元素中删除。相反，onFocus 事件处理程序被添加到下拉容器中，以在输入获得焦点时将显示状态设置为 true。

每个下拉项的 onClick 事件处理程序现在将更新所选值并将显示状态设置为 false，从而关闭下拉列表。

通过进行这些更改，您应该能够使用 onClick 事件在下拉列表中选择一个项目，而不受 onBlur 事件的干扰。