Question

我正在制作“按类别过滤”类型的函数，为此，我需要能够选择多个选项。虽然我知道我需要将选择存储在状态中，但是当我尝试检查当前状态是否已经包含我要单击的按钮时，我碰到了墙。

此外，此问题的第二点是，是否有一种方法可以让已选择的按钮“知道”是否选择了其他任何按钮，因为按钮的外观需要根据单个按钮还是单个按钮而改变。选择了多个按钮。

任何帮助/建议都将不胜感激。

代码：

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styles from './styles.module.sass';

const Category = (props) => {
  const { categories } = props;
  const [selected, setSelected] = useState([]);

  const handleSelected = (button) => {
    if (selected.includes(button)) {
      setSelected({ selected: selected.filter((s) => s !== button) });
    } else {
      setSelected(...selected, [button]);
    }
  };

  return (
    <div className={styles.category}>
      {categories.map((category) => (
        <button
          type='button'
          key={category.id}
          onClick={handleSelected(category.id)}
          className={selected.includes(category.id) ? styles.selected : styles.button}
        >
          {category.name}
        </button>
      ))}
    </div>
  );
};

Category.defaultProps = {
};

Category.propTypes = {
  categories: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default Category;

Answer 1

首先，您的代码中存在一些错误，您的onClick处理程序被称为每个渲染，而不是单击按钮时被调用： onchange。如果要在单击时调用该函数，则需要发送箭头函数：onClick={handleSelected(category.id)}

第二，所选添加项有几个错误：

onClick={() => handleSelected(category.id)}

您可以通过执行以下操作来修复它（我也更改为使用setState的更新程序形式来更新逻辑）：

  const handleSelected = (button) => {
    if (selected.includes(button)) {
      setSelected({ selected: selected.filter((s) => s !== button) }); // selected is not an object its array of selected ids
    } else { 
      setSelected(...selected, [button]); // button is ignored setState accepts only one argument 
    }
  };

还请注意，将所选状态存储在类别数组中可能会更好因此您不必每次都使用selected.includes，而只需使用布尔值即可。

  const handleSelected = (id) => {
    if (selected.includes(id)) {
      setSelected(prevSelected => prevSelected.filter((s) => s !== id));
    } else { 
      setSelected(prevSelected => ([...prevSelected, id]));
    }
  };

选择多个按钮，如果选择多个按钮，则添加删除图标-React Hooks

1 个答案: