Javascript 无法在react input中使用onFocus和onBlur选择建议列表值

我在输入字段的焦点上显示建议列表，并在单击外部时隐藏

列表显示和隐藏在输入字段的焦点和模糊上起作用，但无法从下拉列表中选择任何列表值。当我尝试选择时，它会隐藏下拉列表，而不选择单击的列表项

删除onBlur方法后，我可以从下拉列表中选择值，但无法实现另一个场景-通过单击任意位置隐藏下拉列表

示例代码

function Suggestion() {
  const [search, setSearch] = useState("");
  const [suggestion, setShowSuggestion] = useState(false);
  const typeSearch = (e) => {
    setSearch(e.target.value);
  };
  const handleFocus = (e) => {
    setShowSuggestion(true);
  };
  const handleBlur = (e) => {
    setShowSuggestion(false);
  };
  const setToInput = (selected) => {
    setSearch(selected);
    setShowSuggestion(false);
  };
  return (
    <div className="App">
      <input
        types="text"
        value={search}
        onChange={typeSearch}
        placeholder="Type something"
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      {suggestion && (
        <div className="list">
          {["List 1", "List 2", "List 3"].map((list) => (
            <p onClick={()=>setToInput(list)} key={list}>
              {list}
            </p>
          ))}
        </div>
      )}
    </div>
  );
}

函数建议（）{
const[search，setSearch]=useState（“”）；
const[suggestion，setShowSuggestion]=useState（false）；
常量类型搜索=（e）=>{
设置搜索（如目标值）；
};
常数handleFocus=（e）=>{
设置显示建议（正确）；
};
常量车把LUR=（e）=>{
建议（假）；
};
常量setToInput=（选定）=>{
设置搜索（选定）；
建议（假）；
};
返回(
{建议&&(
{[“列表1”、“列表2”、“列表3”].map（（列表）=>(
setToInput（list）}key={list}>
{list}

))}
)}
);
}

如何通过更新/更正代码来实现这两种情况

请帮我把它弄好

---

提前感谢。

因为您正在调用

setShowSuggestion（false）

onBlur，每当单击列表时隐藏列表，并显示输入调用模糊事件

 <div className="App">
  <input
    types="text"
    value={search}
    onChange={typeSearch}
    placeholder="Type something"
    onFocus={handleFocus}
   //remove this
   //onBlur={handleBlur}
  />
  {suggestion && (
    <div className="list">
      {["List 1", "List 2", "List 3"].map((list) => (
        <p onClick={()=>
             {
             setToInput(list)
             // you call handleBlur after your select
              handleBlur()
              }} key={list}>
          {list}
        </p>
      ))}
    </div>
  )}
</div>

{建议&&(
{[“列表1”、“列表2”、“列表3”].map（（列表）=>(

{
设置输入（列表）
//您在选择后调用handleBlur
车把
}}键={list}>
{list}

))}
)}