Question

我一直在使用here找到的预制React-Bootstrap Typeahead搜索栏

我无法从下拉菜单访问子元素。我希望能够为下拉菜单项提供一个Onclick函数，但似乎无法访问这些子项。

下面是我当前使用的代码，在这里我使用typeahead

<div className="search-bar">
  <Typeahead
    id="sample"
    options= {cities.map((city) => (city))}
    labelKey="name"
    placeholder="Enter a city"
  />
</div>

如何获得列出的这些元素城市的点击？

Answer 1

您可以使用renderMenu属性自定义菜单呈现和行为：

<Typeahead
  options={options}
  renderMenu={(results, menuProps) => (
    <Menu {...menuProps}>
      {results.map((result, index) => (
        <MenuItem
          onClick={() => console.log('click!')}
          option={result}
          position={index}>
          {result.label}
        </MenuItem>
      ))}
    </Menu>
  )}
/>

在显示菜单项的情况下，您可以随时为每个项目添加自己的onClick处理程序。这是working example。

React Bootstrap Typeahead子onclick

1 个答案: