javascript - react - 组合功能

Question

我怎么能结合这两个函数(handleSelectAll 和 handleSelectNone)？切换(开/关)在这里不起作用，因为在大多数情况下，某些选项会被“选中”，因此您不知道是将其切换为 ALL 还是 NONE，因此需要有 2 个单独的按钮(至少我是这么认为的) )。我在想的是该功能可以共享

const handleSelectAll = () => {
    setCategories(oldCats => oldCats.map(category => {
        return {
          ...category,
          selected: true
        }
    }))
  }

  const handleSelectNone = () => {
    setCategories(oldCats => oldCats.map(category => {
        return {
          ...category,
          selected: false
        }
    }))
  }

然后是组件中的按钮:

const Categories = (props) => {
  return(
    <div className="categories">
      <h2>Categories</h2>
      <form className="check-form">
        {props.categories.map(category => (
          <Category key={category.id} category={category} {...props} />
        ))}
      </form>
     <button onClick={props.handleSelectAll}>
          Select All
     </button>
     <button onClick={props.handleSelectNone}>
       Select None
     </button>
    </div>
  );
};

有没有办法只为两个按钮定义一个功能？

Answer 1

我通常这样做，保持简单易读，没有什么太花哨的:

const handleSelect = (selected = false) => {
  setCategories((oldCats) =>
    oldCats.map((category) => {
      return {
        ...category,
        selected,
      }
    })
  )
}

const handleSelectAll = () => {
  return handleSelect(true)
}

const handleSelectNone = () => {
  return handleSelect()
}

(渲染部分按原样继续)

这样做可以避免创建额外的模板函数，传递参数并在每次渲染时创建新函数