单击框时在反应搜索框中显示选项

Question

我正在尝试以下代码

import React, { Component } from 'react'

import ReactSearchBox from 'react-search-box'

export default class App extends Component {

  data = [

    {

      key: 'john',

      value: 'John Doe',

    },

    {

      key: 'jane',

      value: 'Jane Doe',

    },

    {

      key: 'mary',

      value: 'Mary Phillips',

    },

    {

      key: 'robert',

      value: 'Robert',

    },

    {

      key: 'karius',

      value: 'Karius',

    },

  ]

  render() {

    return (

      <ReactSearchBox

        placeholder="Placeholder"

        value="Doe"

        data={this.data}

        callback={record => console.log(record)}

      />

    )

  }

}

它确实有效。但是，搜索选项仅在我开始在搜索框中输入时显示。我想要做的是当用户点击搜索时，向他们展示一些选项，你能帮助理解如何实现这一点。

有一种方法叫

onFocus - A function which acts as a callback when the input is focussed.

当我单击搜索框时确实会调用它，但我无法弄清楚如何在下拉列表中显示选项。

Answer 1

import React, { Component } from 'react'import Select from 'react-select'export default class App extends Component {state = {&nbsp; selectedValue:null}&nbsp;data = [&nbsp;{&nbsp; label: 'john',&nbsp; value: 'John Doe',&nbsp;},&nbsp;{&nbsp; label: 'jane',&nbsp; value: 'Jane Doe',&nbsp;},&nbsp;{&nbsp; label: 'mary',&nbsp; value: 'Mary Phillips',&nbsp;},&nbsp;{&nbsp; label: 'robert',&nbsp; value: 'Robert',&nbsp;},&nbsp;{&nbsp; label: 'karius',&nbsp; value: 'Karius',&nbsp; },&nbsp;]&nbsp;render() {&nbsp;return (&nbsp; <Select&nbsp; options={this.data}&nbsp; isSearchable&nbsp; value={this.state.selectedValue}&nbsp; onChange={this.handleChange}&nbsp; />&nbsp; )}}如果您想显示带有搜索选项的下拉菜单，我建议您使用 react-select 库。但是，您的数据应该采用像 {label:' ',value:' '} 这样的对象形式。这个组件有一个 isSearchable 属性，它允许我们搜索下拉菜单以及手动选择一个选项。希望这可以帮助！