Чтобы реализовать некоторые функции в моем приложении реакции, мне нужно перевернуть изображение в сетке по горизонтали, когда пользователь выберет его с помощью события onClick.
Я читал о состояниях в реакции и заметил, что это то, что мне нужно.
Когда событие onClick, переверните изображение.
Следующий код не работает должным образом.
isExpanded работает нормально, но изображение в сетке не переворачивается.
Что я делаю не так?
Я инициировал от isExpanded до false в моем конструкторе.
handleToggle(e){
e.preventDefault();
this.setState({
isExpanded: !this.state.isExpanded,
})
render() {
const {isExpanded } = this.state;
return (
<div
className={`image-root ${isExpanded ? 'image-flip' : ''}`}
style={{
backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
width: this.state.size + 'px',
height: this.state.size + 'px'
}}
>
<div>
<FontAwesome className="image-icon" onClick={(e)=>
this.handleToggle(e)} name="arrows-alt-h" title="flip"/>
</div>
</div>
);
}
}
Код .scss :
.image-root {
background-size: cover;
background-position: center center;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
position: relative;
border: 1px solid white;
> div {
visibility: hidden;
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: white;
padding: 15px;
text-align: center;
text-align: center;
box-sizing: border-box;
white-space: pre;
display: flex;
align-items: center;
justify-content: center;
}
&:hover > div {
visibility: visible;
}
.image-icon {
font-size: 20px;
vertical-align: middle;
border: 1px solid #ccc;
color: #ccc;
border-radius: 5px;
cursor: pointer;
padding: 12px;
margin: 3px;
&:hover {
color: white;
border-color: white;
}
}
.image-flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}