Хотел прямо в constructor
нужные элементы объявить (this.runner
). Однако, получаю undefined
, что логично, элемент еще не создан. Можно создать вспомогательную функцию, в которой объявлять нужные элементы, то это какая-то кривая затея. А как правильно это сделать?
class App extends React.Component {
constructor(props) {
super(props);
this.runner = document.getElementsByClassName('slider__runner')[0];
}
getElement() {
this.runner = document.getElementsByClassName('slider__runner')[0];
}
onClick(event) {
console.clear();
// Получу undefined
console.log(this.runner);
this.getElement();
// Получу нужный элемент
console.log(this.runner);
this.runner.style.left = `${event.nativeEvent.offsetX - this.runner.offsetWidth / 2}px`
}
render() {
return (
<div className="slider">
<div
onClick = {event => {this.onClick(event)}}
className="slider__range"
>
<div className="slider__runner" / >
</div>
</div>
);
}
}
ReactDOM.render( <
App / > ,
document.getElementById('root')
);
.slider {
padding: 50px 100px;
}
.slider__range {
position: relative;
height: 6px;
margin: 20px 0;
cursor: pointer;
background: #e2e2e2;
}
.slider__runner {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
height: 20px;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #0094ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>