ReactJS кнопки меняют цвет при клике

Question

У меня есть 3 кнопки в reactjs, созданные с помощью Кнопки пользовательского интерфейса материала .

<>
<Button variant="contained">Button 1</Button>
<Button variant="contained">Button 2</Button>
<Button variant="contained">Button3</Button>
</>

Как сделать так, чтобы при нажатии на одну из них менялся ее цвет (скажем, синий) ), а остальные сбрасываются на Default?

Answer 1

Поскольку React использует JSX, вы можете поместить javascript в свой html компонент. Мы можем представить одно состояние, которое управляет вашими кнопками.

в вашем компоненте вы создаете состояние, содержащее целое число

const [buttonSelected, setButtonselected] = useState(0);

Я использую синтаксис перехватчика реагирования, но это также зависит от вашей реализации.

buttonSelected является текущим значением состояния, а setButtonselected является функцией, которая изменяет состояние. Когда вы вызываете его, React перезапустит ваш компонент и изменит отображение.

Теперь вы можете добавить функцию возврата по вашему возвращению

...
<Button variant="contained" onClick={() => setButtonSelected(1)}>Button 1</Button>
<Button variant="contained" onClick={() => setButtonSelected(2)} >Button 2</Button>
<Button variant="contained" onClick={() => setButtonSelected(3)}>Button3 </Button>
...

Это изменит значение buttonSelected при каждом нажатии кнопки.

Теперь нам нужно изменить цвет, для этого мы будем использовать makeStyle, но есть другой способ сделать это.

Сначала создайте элемент стиля вне вашего компонента.

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
            selected: {
                background: 'blue',
            },
            default:{
                background: 'default',
            }
        }
    ),
);

Затем вызовите его в вашем компоненте

const classes = useStyles();

И, наконец, вы можете установить желаемый стиль в зависимости от значения

...
<Button className={(buttonSelected === 1) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 2) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 3) ? classes.selected : classes.default} variant.....
...

Это троичный оператор, это эквивалент

if(buttonSelected === 1){
    return classes.selected
} else {
    return classes.default
}

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

Не стесняйтесь, если у вас есть какие-либо вопросы:)