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

Question

我正在构建一个休息国家的应用程序，我正在尝试通过列表按地区过滤。我想使用下拉菜单。我尝试过使用 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;

我的问题是，我无法将值更改为所选选项，因此我无法过滤从 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 组件，它自己解决了这个问题。