Почему в консоли выводятся противоположные значения?

Question

[tostershmoster]

import { FC, useRef, useState } from 'react';
import './TrelloBoardColor.scss';

type Color = {
  name: string;
  value: string;
};

type Props = {
  color: Color;
};

const TrelloBoardColor: FC<Props> = ({ color }) => {
  const [isColorClicked, setIsColorClicked] = useState(false);
  const trelloBoardColorRef = useRef<HTMLDivElement>(null);

  const handleColorClick = () => {
    // при первом клике здесь становится значение в true
    // в инструментах разработчика я вижу класс 'trello-board-color_clicked' у элемента
    setIsColorClicked(!isColorClicked);

    // а тут выводится элемент только с классом 'trello-board-color'
    console.log(trelloBoardColorRef.current);

    // и тут значение false хотя класс 'trello-board-color_clicked' добавляется когда isColorClicked == true 
    console.log(`handleColorClick(isColorClicked): ${isColorClicked}`);
  };

  return (
    <div
      ref={trelloBoardColorRef}
      className={`trello-board-color ${isColorClicked ? 'trello-board-color_clicked' : ''}`}
      style={{ backgroundColor: `${color.value}` }}
      onClick={handleColorClick}></div>
  );
};

export default TrelloBoardColor;

и при последующих кликах значения в консоли выводятся наоборот. почему?

у меня несколько таких квадратов с цветами. нужно чтобы по клику можно было выбрать только один (и он стал отмечен галочкой) и другие при этом на клик не реагировали. я так понимаю переменная из стейта (isColorClicked) тут не подходит. как мне тогда сделать эти "флаги", рефы использовать?

Answer 1

[Alexandroppolus]

isColorClicked будет новый (точнее, это будет новая переменная) на новом рендере, который произойдет после завершения handleColorClick. Стейт поменялся, но в переменной handleColorClick старое значение, это просто переменная в замыкании.

класс в trelloBoardColorRef.current старый, потому что ещё не обновился, он станет новый после рендера.

Comments

[tostershmoster]

у меня несколько таких квадратов с цветами. нужно чтобы по клику можно было выбрать только один (и он стал отмечен галочкой) и другие при этом на клик не реагировали. я так понимаю переменная из стейта (isColorClicked) тут не подходит. как мне тогда сделать эти "флаги", рефы использовать?

[Alexandroppolus]

tostershmoster, если нужно только один выбранный, то подойдет вариант с радиокнопками:

<label>
   <input type="radio" />
   <div class="trello-board-color" style="bg-color: ..." />

и в стилях прописать

input:not(:checked) + .trello-board-color {.opacity: 0; }

потом просто берешь тот инпут, который отмечен, и всё.

это "неуправляемый" компонент.

если надо "управляемый", то в TrelloBoardColor Props нужно добавить пропсы

onSelect: (color) => void
isSelected: boolean

выбранный цвет хранить в стейте снаружи TrelloBoardColor.