在React中选择后在输入字段中显示所选值

Question

如果我从实时搜索下拉菜单中选择“Rice”（如下面的屏幕截图所述）

我希望点击“Rice”后，该值将显示在输入字段中，我该怎么做？

这是输入标签和我代表值的 a 标签：

<div>
                    <input type="text" placeholder="Choose food" onChange={e => setValue(e.target.value)} value={value} />
                    <div>
                        {result.map((result, index) => (
                            <a href='#' key={index}>
                                <div className='bg-warning'>
                                    {result}
                                </div>
                            </a>
                        ))}
                    </div>
                </div>

Answer 1

您可以设置标签的 onClick 状态值，只需将 onClick={e => setValue(result)} 添加到标签即可

<div>
                <input type="text" placeholder="Choose food" onChange={e => setValue(e.target.value)} value={value} />
                <div>
                    {result.map((result, index) => (
                        <a href='#' key={index} onClick={e => setValue(result)}>
                            <div className='bg-warning'>
                                {result}
                            </div>
                        </a>
                    ))}
                </div>
            </div>

Answer 2

• 在锚标记上有一个

  onClick

  ，如下所示并设置状态，但我会选择一个 如果不用作链接，则使用不同的标签（不是锚）

   <a href="#" key={index} onClick={()=> setValue(result)}>
     <div className="bg-warning">{result}</div>
   </a>;
  

Answer 3

代码中存在一些性能问题/不良做法：

1. 使用 href 属性设置为

   #

   的锚元素是一种不好的做法：它可能会产生不需要的滚动或不需要的 url 更改。例如，在这种情况下，首选

   div

   或

   span

   。
2. 使用内联回调函数

   onClick={e => setValue(result)}

   可能会带来性能问题，因为每次组件渲染时，都会创建一个新函数，因此它可以不必要地重新渲染组件和子组件。最佳实践是使用外部回调函数来处理它，例如

   onClick={handleResultClick}

3. 如果可以的话，你应该在react中使用唯一的id而不是索引，否则，react无法正确识别列表中的项目。当您必须处理 CRUD 列表时，这一点更为重要