Изменение className кнопки на основе состояния не работает должным образом - PullRequest
Новая
       37

Изменение className кнопки на основе состояния не работает должным образом

2 голосов
/ 24 апреля 2020

Я пытаюсь изменить 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/

Ответы [ 2 ]

2 голосов
/ 24 апреля 2020

Согласно документам , вам нужна функция установки для изменения состояния.

Ваши объявления состояний будут выглядеть следующим образом: const [isActive, setIsActive] = useState(false);, а в вашей функции addOrRemove вызовите setIsActive(!isActive);

1 голос
/ 24 апреля 2020

Вы можете сохранить состояние для каждой кнопки, например, так: 

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

и затем установить его на клик: 

<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}, по одному для каждой кнопки.

Вы не можете иметь общее состояние, в противном случае, когда вы измените одну кнопку, она изменит другую, потому что они будут использовать точно такое же состояние.

Вам нужно будет посмотреть, как структурировать ваше состояние в вашем конкретном приложении.

...