Измените цвет фона всех кнопок, сделанный в react

#javascript #reactjs #typescript

Вопрос:

Я выполняю функцию(clearGame), чтобы изменить весь цвет фона чисел, которые я получаю в «NumbersParent». Я попытался использовать querySelector, но все, что я получаю, — это «null» от changeStyle.

 const newBet: React.FC = () => {

  const clearGame = () => {
    let spliceRangeJSON = gamesJson[whichLoteriaIsVar].range;
    for (let i = 0; i <= spliceRangeJSON; i  ) {
      const changeStyle = document.querySelector<HTMLElement>('data-key');
      changeStyle!.style.backgroundColor = '#ADC0C4';
    }
  };

  const NumbersParent = (props: any) => {
    const [numbersColor, setNumbersColor] = useState('#ADC0C4');
    const changeButtonColor = () => {
      if (numbersColor === '#ADC0C4') {
        setNumbersColor(gamesJson[whichLoteriaIsVar].color);
      } else {
        setNumbersColor('#ADC0C4');
      }
    };
    return (
      <Numbers
        color={numbersColor}
        onClick={changeButtonColor}
      >
        {props.children}
      </Numbers>
    );
  };

} return(
        <NumbersContainer>
          {numbersList.map((num) => (
            <NumbersParent key={num} id={num} data-key={num}>
              {num}
            </NumbersParent>
          ))}
        </NumbersContainer>
        <Button onClick={clearGame}>Clear Game</Button
)
 

Комментарии:

1. Не пытайтесь манипулировать dom внутри приложения react. Все изменения должны быть внесены в компоненты react, затем react обновит dom. React не может отслеживать изменения в dom, внесенные вне компонентов.

2. Вы можете инициализировать 2 вида кнопок и использовать состояние для управления тем, какая кнопка отображается на экране.