React-合并功能

Question

我如何结合这两个功能（handleSelectAll和handleSelectNone）？切换（打开/关闭）在这里不起作用，因为在大多数情况下，某些选项将被“选中”，因此您将不知道是将其切换为“全部”还是“无”，因此需要有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()
}

（渲染部分按原样继续）

这样做避免了创建额外的模板函数传递参数并在每个渲染器上创建新函数

Answer 2

您可以使用参数使其成为一个函数，例如

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

然后您可以像这样在每个按钮中使用参数来调用此函数：

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.handleChangeAll(true)}>
          Select All
     </button>
     <button onClick={() => props.handleChangeAll(false)}>
       Select None
     </button>
    </div>
  );
};

Answer 3

是。您可以使用函数包装对props.handleSelectAll和props.handleSelectNone的调用，并将新值作为参数传递：

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.handleSelect(true)}>
          Select All
     </button>
     <button onClick={()=>props.handleSelect(false)}>
       Select None
     </button>
    </div>
  );
};

[[()=>props.handleSelect(true)是一个箭头函数，在单击时调用handleSelect]

新功能将是：

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

Answer 4

selected: !category.selected

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