javascript - 根据状态更改按钮的 className 无法正常工作

Question

我正在尝试根据按钮是否处于活动状态来更改按钮的 CSS。出于某种原因，即使我为它分配了三元条件的值，className 也没有出现在我的 HTML 中。

  var [isActive] = useState(false);
  var [btn_class] = useState('');

  const addOrRemove = (array, value) => {
    var index = array.indexOf(value);

    if (index === -1) {
      array.push(value);
      isActive = !isActive;
    } else {
      array.splice(index, 1);
      isActive = !isActive;
    }
    btn_class = isActive ? 'noBackground' : 'background';
  };

   <div>
            <Button
              onClick={e => addOrRemove(formData.interests, e.target.value)}
              value="Front-End Engineering"
              className={btn_class}
            >
              Front-End Engineering
            </Button>
            <Button
              onClick={e => addOrRemove(formData.interests, e.target.value)}
              value="Back-End Engineering"
              className={btn_class}
            >
              Back-End Engineering
            </Button>
          </div>

我正在寻找完全类似的东西，但这种方法行不通。

https://jsfiddle.net/tkkqx2y2/

标签： javascriptreactjsstate

Answer 1

根据文档，您需要一个 setter 函数来更改状态。

您的状态声明如下所示：const [isActive, setIsActive] = useState(false);在您的 addOrRemove 函数中，调用setIsActive(!isActive);