React 中的下拉菜单，通过列表过滤

Question

我正在构建一个 react 国家/地区应用程序，我正在尝试通过列表按地区过滤。我想使用下拉菜单。我试过使用 react select，创建一个新组件，这是我的代码

const DropdownMenu = (props) => {
    const options = [
        '', 'Africa', 'America', 'Asia', 'Europe', 'Oceania'
      ];
    const defaultOption = options[0];

    const handleFilterInput = (event) => {
        let value = event.target.options;
        props.handleRegionSearch(value);  
    };

    return(
        <div>
            <Select options={options} onChange={handleFilterInput} value={defaultOption} placeholder="Select a region"/>
        </div>
    )
}

export default DropdownMenu;

我的问题是，我无法获取更改为选项 selected 的值，因此我无法过滤从 api 中获取的列表。有人对此有可能的解决方案吗？谢谢

Answer 1

您设置的值有误

value={defaultOption}

此默认选项永远不会更改。

您可以做的是从 onChange() 捕获当前值并将该值设置在某处（最好是在状态中），然后将该存储的值用作下拉组件的值

像这样。

    const options = [
        '', 'Africa', 'America', 'Asia', 'Europe', 'Oceania'
      ];

    const [selectedValue , setSelectedValue ] = useState(options[0]);

    const handleFilterInput = (event) => {
        let value = event.target.options;
        setSelectedValue(value);
        props.handleRegionSearch(value);  
    };

    return(
        <div>
            <Select options={options} onChange={handleFilterInput} value={selectedValue} placeholder="Select a region"/>
        </div>
    )

Answer 2

谢谢！最后，我使用了 react-select 组件，它自己解决了这个问题。

React 中的下拉菜单，通过列表过滤

Dropdown menu in React, filter through list

jsx

drop-down-menu

reactjs