React 中的多选需要使用什么事件答案

【问题标题】：what is the event that needed to use for multiselect in ReactReact 中的多选需要使用什么事件
【发布时间】：2021-05-01 16:58:09
【问题描述】：

我想通过使用选择菜单（选择标签）选择它们来根据它们的类别过滤电影列表，我可以使用点击事件的按钮来完成它，但是当我想替换它时购买多- 通过将事件更改为 onChange 来选择过滤器不起作用。

你怎么看？

谢谢

//根据类别过滤电影，这个函数是在 App.js 中创建的，它已经作为 props 传递给我的 CategoriesFilter 组件

const filterMovie = (category) => {
    const filterMovie = MoviesData.filter((movie)=> movie.category === category);
    setMoviesList(filterMovie);
  }

// 这是我的组件

const CategoriesFilter = ({categories, filterMovie}) => {
    return (
    <div>  

    <select >
    {categories.map((category, index)=> {
        return (
        <option key={index} onChange={()=> filterMovie(category)}>{category}</option>       
        )
    })}
    </select> 

    </div>
      
    )
}

【问题讨论】：

您提到了 multi-select ，但在 sn-p 中没有看到任何相关信息
是选择标签

标签： javascript html reactjs

【解决方案1】：

有几个选项。

您可能可以构建一个自定义多选下拉组件，其中每个项目都有复选框。
您可以使用第三方 npm 包，例如 react-select。 https://www.npmjs.com/package/react-select

我建议你使用react-select。

您也可以使用带有多个属性的选择标签。但它不会按照你想要的方式工作。

<select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

要选择多个项目，您将拥有ctrl + click 这些项目

【讨论】：

【解决方案2】：

多选为<select multiple/>
onchange 事件不与每个选项关联，它是一个选择元素的事件。

【讨论】：