React18自动建议输入框点击选项后值不显示问题求助

问题分析 #

你的自动建议组件在点击选项后输入框无法显示选中值，但在开发者工具响应式模式下正常，核心原因是事件触发时序冲突：
点击建议项时，输入框的onBlur事件会先于选项的onClick事件触发。onBlur中设置的100ms延迟清除建议列表的定时器，会和onSuggestHandler中的状态更新产生时序干扰，导致输入框的value未能及时更新。响应式模式下浏览器事件处理逻辑略有差异，因此问题未显现。

解决方案 #

方案一：替换onClick为onMouseDown #

利用mousedown事件先于blur触发的特性，确保选中值先被设置到输入框：

// 修改建议项的事件绑定
<div
  key={suggestion.id}
  className="user"
  onMouseDown={() => onSuggestHandler(suggestion.name)}
>
  {suggestion.name}
</div>

方案二：清除onBlur的定时器 #

通过保存定时器引用，在点击选项时清除onBlur的延迟任务，避免状态更新被干扰：

import { useEffect, useState, useRef } from "react"; // 引入useRef
import "./style.css";

const AutoComplete = () => {
  const [text, setText] = useState("");
  const [users, setUsers] = useState([]);
  const [suggestions, setSuggestions] = useState([]);
  const blurTimerRef = useRef(null); // 保存定时器引用

  useEffect(() => {
    const loadUser = async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );
      const data = await response.json();
      setUsers(data);
    };
    loadUser();
  }, []);

  const onSuggestHandler = (value) => {
    setText(value);
    setSuggestions([]);
    // 清除onBlur的定时器
    if (blurTimerRef.current) {
      clearTimeout(blurTimerRef.current);
      blurTimerRef.current = null;
    }
  };

  const onChangeHandler = (value) => {
    let matches = [];
    if (value.length > 0) {
      matches = users.filter((user) => {
        const regex = new RegExp(`${value}`, "gi");
        return user.name.match(regex);
      });
    }
    setSuggestions(matches);
    setText(value);
  };

  return (
    <div className="container">
      <div>
        <input
          className="input"
          type="text"
          value={text}
          onChange={(event) => onChangeHandler(event.target.value)}
          onBlur={() => {
            // 保存定时器到ref
            blurTimerRef.current = setTimeout(() => {
              setSuggestions([]);
            }, 100);
          }}
        />
      </div>

      <div className="container-user">
        {suggestions &&
          suggestions.map((suggestion) => (
            <div
              key={suggestion.id}
              className="user"
              onClick={() => onSuggestHandler(suggestion.name)}
            >
              {suggestion.name}
            </div>
          ))}
      </div>
    </div>
  );
};

export default AutoComplete;

原理说明 #

• 方案一通过调整事件触发顺序，保证setText先执行，输入框状态更新后再处理blur的清除逻辑。
• 方案二通过清除onBlur的延迟任务，避免其在点击选项后干扰状态更新流程，确保输入框能正确渲染选中值。

内容的提问来源于stack exchange，提问作者Pavitar Sharma