根据复选框过滤掉React中的元素答案

【问题标题】：Filtering out elements in React based on checkbox根据复选框过滤掉React中的元素
【发布时间】：2022-01-14 08:10:27
【问题描述】：

我想根据复选框值过滤我在页面上获得的元素（如果它被选中）。为此，我有以下代码：

import React from 'react'
import CocktailCard from './CocktailCard'
import { useGlobalContext } from '../helpers/context'

export default function Cocktails() {
  const isAlcoholic = React.useRef(null);
  const {cocktails} = useGlobalContext()

  const changeFilter = (isAlcoholic) ? cocktails.filter(cocktail => cocktail.isAlcoholic === "Alcoholic") : cocktails
  console.log(changeFilter)
  if(cocktails.length < 1) {
    return <h2 className="section-title">No cocktails available</h2>
  }

    return (
        <div>
        <div className="row">
        <div className="form-check">
        <label className="form-check-label" htmlFor="alcoholic">
            Alcoholic
            <input 
            className="form-check-input" 
            type="checkbox" 
            ref={isAlcoholic} 
            onChange={() => {
                changeFilter(isAlcoholic.current.checked);
            }}/>
          </label>
        </div>
        </div>
        <div className="container">
        <div className="row">
            {
                cocktails.map((item) => {
                    return <CocktailCard key={item.id} {...item}/>
                })
            }
        </div>
        </div>
        </div>
    )
}

我尝试做 changeFilter 函数，所以它会过滤掉酒精的，如果没有，它会返回当前数组。我确定我做错了什么，因为我在控制台中收到一个错误，说 changeFilter 不是一个函数。

你们能否给我一个更好的想法，我应该如何解决这个错误和一般的逻辑？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

在组件中为复选框状态使用布尔值。

const [showAlcoholic, setShowAlcoholic] = useState(false);

继续根据showAlcoholic 状态过滤鸡尾酒列表。你已经有逻辑了。

设置输入更改的状态。对于复选框：

onChange={event => setShowAlcoholic(event.target.checked)}

【讨论】：

你说的很对，非常感谢。

【解决方案2】：

您必须使用 React 状态来更新项目列表（在您的情况下为鸡尾酒）并重新渲染组件。

这是通过React's useState hook 完成的。每次状态更新时，组件都会重新渲染。

请注意，不需要引用，它可以从输入中删除。

您可以将代码更改为此并与之前的代码进行比较。代码可以进一步改进，但我想让它更接近你已经拥有的。

export default function Cocktails() {
  const [isAlcoholic, setIsAlcoholic] = useState(true);
  const { cocktails } = useGlobalContext()
  
  const filteredCocktails = cocktails.filter((coktail) => {
    return isAlcoholic ? cocktail => cocktail.isAlcoholic === "Alcoholic" : true;
  })

  if (cocktails.length < 1) {
    return <h2 className="section-title">No cocktails available</h2>
  }

  return (
    <div>
      <div className="row">
        <div className="form-check">
          <label className="form-check-label" htmlFor="alcoholic">
            Alcoholic
            <input
              className="form-check-input"
              type="checkbox"
              onChange={() => {
                setIsAlcoholic(isAlcoholic.current.checked);
              }} />
          </label>
        </div>
      </div>
      <div className="container">
        <div className="row">
          {
            filteredCocktails.map((item) => {
              return <CocktailCard key={item.id} {...item} />
            })
          }
        </div>
      </div>
    </div>
  )
}

【讨论】：