React实现选择实时搜索下拉选项后在输入框显示值

你只需要给每个<a>标签添加点击事件，在点击时把选中的食物名称设置到输入框绑定的状态里，同时阻止<a>标签默认的跳转行为即可。

修改后的代码如下：

<div>
    <input type="text" placeholder="Choose food" onChange={e => setValue(e.target.value)} value={value} />
    <div>
        {result.map((item, index) => (
            <a href='#' key={index} onClick={(e) => {
                e.preventDefault(); // 阻止a标签默认跳转行为
                setValue(item); // 将选中的项赋值给输入框状态
            }}>
                <div className='bg-warning'>
                    {item}
                </div>
            </a>
        ))}
    </div>
</div>

关键说明： #

• 给<a>标签添加onClick事件处理函数：
  1. 调用e.preventDefault()避免<a>标签默认的锚点跳转，防止页面不必要的滚动或刷新。
  2. 调用setValue(item)将选中的食物名称同步到输入框绑定的状态变量value，输入框会自动更新显示选中的值。
• 把map遍历的参数名从result改成item，避免和外层的result数组变量名冲突，提升代码可读性。

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