时间戳

首页 > 解决方案 > React 中的多选需要使用什么事件

javascript - React 中的多选需要使用什么事件

问题描述

我想通过使用选择菜单（选择标签）选择它们来根据它们的类别过滤电影列表，我可以使用点击事件的按钮来完成它，但是当我想替换它时购买多选将事件更改为 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>
      
    )
}

标签： javascripthtmlreactjs

解决方案

有几个选项。

  1. 您可能可以为每个项目构建一个带有复选框的自定义多选下拉组件。
  2. 您可以使用第三方 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项目

推荐阅读