I am unable to view the updated state with mouse moves when using setState() post mounting. What is wrong with the below approach? The state is not updated post mounting the RefDemo Component .
The requirementis to have a slider with 3 thumbs which should all start from 0 and can be dragged individually to different positions.
import React, { Component } from "react";
import "./Slider.css";
class RefsDemo extends Component {
constructor(props) {
super(props);
this.slider1 = React.createRef();
this.slider2 = React.createRef();
this.slider3 = React.createRef();
this.value1 = React.createRef();
this.value2 = React.createRef();
this.value3 = React.createRef();
this.bar = React.createRef();
this.state = {
lastOffset1: 0,
posCurrentX1: 0,
lastOffset2: 0,
posCurrentX2: 0,
lastOffset3: 0,
posCurrentX3: 0,
name: ""
};
this.range = 100;
//console.log(this.state);
this.onmouseDown1 = this.onmouseDown1.bind(this);
this.onmouseDown2 = this.onmouseDown2.bind(this);
this.onmouseDown3 = this.onmouseDown3.bind(this);
}
componentDidMount() {
//console.log(this.slider1);
//var {lastOffset1, posCurrentX1, lastOffset2, posCurrentX2, lastOffset3, posCurrentX3} = this.state
this.barLength = getComputedStyle(this.bar.current).width;
this.sliderLength = getComputedStyle(this.slider1.current).width;
this.travelLength = Math.round(
this.barLength.substring(0, this.barLength.length - 2)
);
console.log(this.state);
this.slider1.current.addEventListener("mousedown", this.onmouseDown1);
this.slider2.current.addEventListener("mousedown", this.onmouseDown2);
this.slider3.current.addEventListener("mousedown", this.onmouseDown3);
}
onType = (event) => {
this.setState({
...this.state,
name: event.target.value
});
};
onmouseDown1 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
this.slider1.current.addEventListener("mouseup", (event) => {
this.slider1.current.onMouseMove = null;
this.slider1.current.onMouseUp = null;
//this.lastOffset1 = this.posCurrentX1;
this.setState({
...this.state,
lastOffset1: this.state.posCurrentX1
});
});
this.slider1.current.addEventListener("mousemove", (event) => {
event.preventDefault();
//this.posCurrentX1 = this.lastOffset1 + event.clientX - posInitialX;
this.setState({
...this.state,
posCurrentX1: this.state.lastOffset1 + event.clientX - posInitialX
});
//console.log(window.innerWidth);
// console.log(document.body.style.width);
if (
this.state.posCurrentX1 <= this.travelLength &&
this.state.posCurrentX1 >= 0
) {
// console.log('posCurrentX: ', posCurrentX, 'barLength: ', travelLength);
this.slider1.current.style.left = `${this.state.posCurrentX1}px`;
this.value1.current.innerHTML = Math.round(
(this.range / this.travelLength) * this.state.posCurrentX1
);
}
});
};
onmouseDown2 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
document.addEventListener("mouseup", (event) => {
this.slider2.current.onMouseMove = null;
this.slider2.current.onMouseUp = null;
//this.lastOffset2 = this.posCurrentX2;
this.setState({
...this.state,
lastOffset2: this.state.posCurrentX2
});
});
document.addEventListener("mousemove", (event) => {
event.preventDefault();
//this.posCurrentX2 = this.lastOffset2 + event.clientX - posInitialX;
this.setState({
...this.state,
posCurrentX2: this.state.lastOffset2 + event.clientX - posInitialX
});
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (
this.state.posCurrentX2 <= this.travelLength &&
this.state.posCurrentX2 >= 0
) {
// console.log('posCurrentX: ', posCurrentX, 'barLength: ', travelLength);
this.slider2.current.style.left = `${this.state.posCurrentX2}px`;
this.value2.current.innerHTML = Math.round(
(this.range / this.travelLength) * this.state.posCurrentX2
);
}
});
};
onmouseDown3 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
document.addEventListener("mouseup", (event) => {
this.slider3.current.onMouseMove = null;
this.slider3.current.onMouseUp = null;
//this.lastOffset3 = this.posCurrentX3;
this.setState({
...this.state,
lastOffset3: this.state.posCurrentX3
});
});
document.addEventListener("mousemove", (event) => {
event.preventDefault();
//this.posCurrentX3 = this.lastOffset3 + event.clientX - posInitialX;
this.setState({
...this.state,
posCurrentX3: this.state.lastOffset3 + event.clientX - posInitialX
});
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (
this.state.posCurrentX3 <= this.travelLength &&
this.state.posCurrentX3 >= 0
) {
// console.log('posCurrentX: ', posCurrentX, 'barLength: ', travelLength);
this.slider3.current.style.left = `${this.state.posCurrentX3}px`;
this.value3.current.innerHTML = Math.round(
(this.range / this.travelLength) * this.state.posCurrentX3
);
}
});
};
componentDidUpdate() {
this.slider1.current.addEventListener("mousedown", this.onmouseDown1);
this.slider2.current.addEventListener("mousedown", this.onmouseDown2);
this.slider3.current.addEventListener("mousedown", this.onmouseDown3);
console.log(this.state);
}
// componentWillUnmount() {
// document.removeEventListener("mousedown", this.onmousedown1);
// document.removeEventListener("mousedown", this.onmousedown2);
// document.removeEventListener("mousedown", this.onmousedown3);
// }
render() {
return (
<>
<h3>Hello All</h3>
<input type="text" name={this.state.name} onChange={this.onType} />
<p>{this.state.name}</p>
<div className="box">
<div className="container">
<div className="bar" id="bar" ref={this.bar}>
<div
className="slider"
id="slider-1"
ref={this.slider1}
onMouseDown={this.onmouseDown1}
></div>
<div
className="slider"
id="slider-2"
ref={this.slider2}
onMouseDown={this.onmouseDown2}
></div>
<div
className="slider"
id="slider-3"
ref={this.slider3}
onMouseDown={this.onmouseDown3}
></div>
</div>
</div>
<div className="values">
<div className="value" id="value-1">
3
</div>
<div className="value" id="value-2">
4
</div>
<div className="value" id="value-3">
5
</div>
</div>
</div>
</>
);
}
}
export default RefsDemo;
Slider.css
.box {
width: 60%;
display: flex;
margin: 20px auto;
}
.container {
flex: 1 1 auto;
background-color: #eee;
padding: 50px 30px;
border-radius: 6px;
margin-right: 20px;
}
.bar {
height: 6px;
border-radius: 100px;
background-color: #aaa;
position: relative;
}
.slider {
position: absolute;
top: 50%;
left: 0;
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
#slider-1 {
background-color: #6cc639;
}
#slider-2 {
background-color: #3e4cda;
}
#slider-3 {
background-color: #d33f43;
}
.values {
width: 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
font-family: Roboto, Helvetica, sans-serif;
font-size: 24px;
}
#value-1 {
color: #6cc639;
}
#value-2 {
color: #3e4cda;
}
#value-3 {
color: #d33f43;
}
The three pointers are stuck at same place and I am unable to record mouse movements while dragging the pointers one by one.
I have tried adding the listeners as below in Slider.js file.However it still doesn't work.
