css - 单击按钮时如何设置状态 Hook 和更改 css 类

Question

我有 3 个按钮。单击它们时，它们会设置 penOptions Hook 的 lineType 状态。但是，我也希望按钮在单击时也更改 css 类，以便按钮的背景颜色发生变化。

我试过在 onClick 中调用两个不同的函数，但它似乎并没有真正触发这两个函数。

这是我目前拥有的一个按钮:

<input
    className="pen-buttons"
    type="button"
    value="Solid"
    onClick={e => {setPenOptions({...penOptions, lineType: "solid"})}}
/>

我希望 lineType 会根据单击哪个按钮而改变，并且我希望最后单击的按钮具有蓝色背景色。

我试图像这样更改 css:

className={penOptions.changeClassSolid}
onClick={e => {setPenOptions({...penOptions, lineType: "dot"}); handleClick();}}

然后也在 onClick 上调用它:

    function handleClick() {
        console.log("clicked");
        if (penOptions.lineType === "solid") {
            setPenOptions({...penOptions, changeClassSolid: "pen-buttons--active"});
            setPenOptions({...penOptions, changeClassDash: "pen-buttons"});
            setPenOptions({...penOptions, changeClassDot: "pen-buttons"});
        } else if (penOptions.lineType === "dash") {
            setPenOptions({...penOptions, changeClassSolid: "pen-buttons"});
            setPenOptions({...penOptions, changeClassDash: "pen-buttons--active"});
            setPenOptions({...penOptions, changeClassDot: "pen-buttons"});
        } else if (penOptions.lineType === "dot") {
            setPenOptions({...penOptions, changeClassSolid: "pen-buttons"});
            setPenOptions({...penOptions, changeClassDash: "pen-buttons"});
            setPenOptions({...penOptions, changeClassDot: "pen-buttons--active"});
        };
    };

但这没有用。

Answer 1

如果您真的需要走这条路，那么这可能就是您要通过代码实现的目标。

function Pen() {
  const [penOptions, setPenOptions] = React.useState({
    lineType: '',
    changeClassSolid: 'pen-buttons',
    changeClassDash: 'pen-buttons',
    changeClassDot: 'pen-buttons'
  });
  React.useEffect(() => {
    const opts = {
      changeClassSolid: 'pen-buttons',
      changeClassDash: 'pen-buttons',
      changeClassDot: 'pen-buttons'
    };

    if (penOptions.lineType === 'solid') {
      setPenOptions({
        ...opts,
        lineType: penOptions.lineType,
        changeClassSolid: 'pen-buttons--active'
      });
    }
    if (penOptions.lineType === 'dash') {
      setPenOptions({
        ...opts,
        lineType: penOptions.lineType,
        changeClassDash: 'pen-buttons--active'
      });
    }
    if (penOptions.lineType === 'dot') {
      setPenOptions({
        ...opts,
        lineType: penOptions.lineType,
        changeClassDot: 'pen-buttons--active'
      });
    }
  }, [penOptions.lineType]);
  return (
    <div>
      <p>{penOptions.lineType}</p>
      <button className={penOptions.changeClassSolid} onClick={() => setPenOptions({...penOptions, lineType: 'solid'})}>solid</button>
      <button className={penOptions.changeClassDash} onClick={() => setPenOptions({...penOptions, lineType: 'dash'})}>dash</button>
      <button className={penOptions.changeClassDot} onClick={() => setPenOptions({...penOptions, lineType: 'dot'})}>dot</button>
    </div>
  );
}