Question

我有3个按钮。当您单击它们时，它们将设置penOptions挂钩的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>
  );
}

单击按钮时如何设置状态挂钩和更改CSS类

1 个答案: