根据状态改变按钮的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.nettkkqx2y2

Answer 1

你可以为每个按钮保留状态，像这样。

var [frontend, setFrontend] = useState({
  isActive: true
});
var [backend, setBackend] = useState({
  isActive: true
});

然后设置为onClick

<div>
  <Button
    onClick={e => {
      setFrontend({ ...frontend, isActive: !frontend.isActive });
      addOrRemove(formData.interests, e.target.value);
    }}
    value="Front-End Engineering"
    className={frontend.isActive ? "noBackground" : "background"}
  >
    Front-End Engineering
  </Button>
  <Button
    onClick={e => {
      setBackend({ ...backend, isActive: !backend.isActive });
      addOrRemove(formData.interests, e.target.value);
    }}
    value="Back-End Engineering"
    className={backend.isActive ? "noBackground" : "background"}
  >
    Back-End Engineering
  </Button>
</div>

你可能可以根据你代码的其他部分重构上面的内容，但主要的想法是，你至少要保留两个状态（可以是在同一个状态下）。useState譬如 {first: true, second: true}每个按钮都有一个。

你不能有一个共享的状态，否则当你改变一个按钮时，会改变另一个按钮，因为它们将使用完全相同的状态。

你将不得不看看如何在你的特定应用程序中构建你的状态。

Answer 2

根据 文件你需要一个setter函数来改变状态。

你的状态声明应该是这样的。const [isActive, setIsActive] = useState(false); 然后在你的addOrRemove函数中，调用： setIsActive(!isActive);