在 React 中的 Click 上切换按钮答案

【问题标题】：Toggle a button on Click in React在 React 中的 Click 上切换按钮
【发布时间】：2021-09-15 14:45:11
【问题描述】：

您好，我目前正在显示我的类别按钮。我希望当我单击一个按钮时，它会变暗并处于活动状态，当我再次单击它时，它将返回到它的默认样式并且不活动..

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(0.5),
    border: "1px solid black",
    borderRadius: "1em",
    boxShadow: "1px 1px",
  },
  scrollMenu: {
    overflow: "auto",
    whiteSpace: "nowrap",
  },
  buttonActive: {
    backgroundColor: "gray",
  },
}))

    const CategoryList = ({ categories }) => {
  const classes = useStyles()

  const [myFilters, setMyFilters] = useState({
    filters: { category: [] },
  })
  const [limit, setLimit] = useState(10)
  const [skip, setSkip] = useState(0)
  const [location, setLocation] = useState({
    long: 120.9868052,
    lat: 14.6038269,
  })
const [ active, setActive ] = useState(false)

  //   const handleClick = (e, categoryId) => {
  //     e.preventDefault()
  //     console.log(categoryId)
  //   }

  const loadFilteredResults = (newFilters) => {
    console.log(newFilters)
    getProductsByCategory(location.long, location.lat, skip, limit, newFilters)
  }

  const clickFilters = (filterBy, categoryId) => {
    console.log("Product", filterBy, categoryId)
    const newFilters = {
      ...myFilters,
      filters: {
        [filterBy]: [...myFilters.filters[filterBy], categoryId],
      },
    }
    loadFilteredResults(newFilters.filters)
    setMyFilters(newFilters)
setActive(!active)
  }

  useEffect(() => {
    loadFilteredResults(myFilters.filters)
  }, [])

  return (
    <div className={classes.scrollMenu}>
      {categories.map((category) => {
        return (
          <Button
            key={category._id}
            className={active ? classes.button : classes.buttonActive}
            onClick={() => clickFilters("category", category._id)}
          >
            {category.name}
          </Button>
        )
      })}
    </div>
  )
}

export default CategoryList

但是发生的情况是，当我单击一个按钮时，所有其他按钮都会变暗。

然后当我再次单击它时，所有内容将再次处于默认状态。我怎样才能实现我单击的每个按钮都会变暗，然后当我再次单击它时它又会变回白色。

【问题讨论】：

标签： css reactjs react-hooks

【解决方案1】：

因为您使用布尔值来控制所有按钮。您应该使用按钮的 id/index 进行控制，如下所示：

const [ active, setActive ] = useState(null)

const clickFilters = (filterBy, categoryId) => {
  ...
  setActive(active === categoryId ? null : categoryId )
}

className={active === category._id ? classes.button : classes.buttonActive}

【讨论】：

试过了，但是当我再次点击按钮时，它仍然是白色的。我希望它恢复以前的风格

【解决方案2】：

为按钮命名，然后在状态中创建动态地图以跟踪它们的暗/亮状态。

const [darkButtons, setDarkButtons] = useState({})

// the button code
<Button 
    name={category.[some unique property]}>
    className={darkButtons.[some unique property] ? classes.button : classes.buttonActive}
    ...
</Button>

在您的点击处理程序中，类似于，

const clickFilters = e => {
    // do everything else

    // this will toggle a boolean for the button by their name
    // so if you click one, it switches
    setDarkButtons({ ...buttonState, [e.target.name]: !buttonState[e.target.name]})

}

这将动态跟踪每个按钮的黑暗状态。

【讨论】：