#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 вида кнопок и использовать состояние для управления тем, какая кнопка отображается на экране.