根据状态改变按钮的className不能正常工作。

我试图根据按钮是否处于活动状态来改变它的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

解决方案:

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

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}每个按钮都有一个。

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

能否获得response body参数?

2022-9-8 11:11:37

未分类

离散优化(SOS1约束) - GEKKO.

2022-9-8 11:22:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索