Необходимая теория:
Состояние и жизненный циклИспользование хука состоянияСтилизация и CSSОбработка событий
Вам бы я так же рекомендовал пройти
tutorial.
Декомпозиция вашей задачи:
1. Завести ключ состояния типа
boolean для определения необходимости в добавлении класса mystyle div-элементу, например isActive.
2. Повесить обработчик события click на кнопку.
3. Изменять по клику состояние на противоположное.
4. В зависимости от значения состояния isActive, либо добавляем класс mystyle div-элементу, либо нет.
Решение:
Шаг 1: Заводим ключ состояния// class component example
class Example extends React.Component {
state = {
isActive: false,
};
render() {
const { isActive } = this.state;
return (
<div>
<button>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
}
// functional component example
const Example = () => {
const [isActive, setIsActive] = useState(false);
return (
<div>
<button>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
Шаг 2: Вешаем обработчик события click на кнопку// class component example
class Example extends React.Component {
state = {
isActive: false,
};
handleClick = () => {
};
render() {
const { isActive } = this.state;
return (
<div>
<button onClick={this.handleClick}>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
}
// functional component example
const Example = () => {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
};
return (
<div>
<button onClick={handleClick}>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
Шаг 3: Изменяем по клику состояние на противоположное// class component example
class Example extends React.Component {
state = {
isActive: false,
};
handleClick = () => {
this.setState(state => ({ isActive: !state.isActive }));
};
render() {
const { isActive } = this.state;
return (
<div>
<button onClick={this.handleClick}>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
}
// functional component example
const Example = () => {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(s => !s);
};
return (
<div>
<button onClick={handleClick}>Try it</button>
<div>
This is a DIV element.
</div>
</div>
);
}
Шаг 4: Добавляем логику установки значения класса в зависимости от состояния// class component example
class Example extends React.Component {
state = {
isActive: false,
};
handleClick = () => {
this.setState(state => ({ isActive: !state.isActive }));
};
render() {
const { isActive } = this.state;
return (
<div>
<button onClick={this.handleClick}>Try it</button>
<div className={isActive ? 'mystyle' : ''}>
This is a DIV element.
</div>
</div>
);
}
}
// functional component example
const Example = () => {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(s => !s);
};
return (
<div>
<button onClick={handleClick}>Try it</button>
<div className={isActive ? 'mystyle' : ''}>
This is a DIV element.
</div>
</div>
);
}
P.S. Лучшее, что вы можете для себя сделать, это перестать просить готовые решения и пытаться решать задачи самостоятельно. Задачи всех ваших вопросов идентичны, но из-за того, что вы не пытаетесь их решить сами, они по-прежнему вызывают у вас затруднения. Для всего того, что вы спрашивали ранее, так же как и для этой задачи, достаточно простой
декомпозиции и ознакомления с нужными разделами
документации.
