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

Question

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

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 获取的列表。有没有人对此有可能的解决方案？谢谢

标签： reactjsdrop-down-menujsx

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>
    )