问题描述
嗨,我正在尝试将具有多个拇指代码的滑块的以下 HTML 和 vanilla JS 转换为 React 类组件,但在将事件处理程序附加到引用时遇到了一些问题。 有什么建议可以复制相同的行为吗?
滑块.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script defer src="Slider.js"></script>
</head>
<body>
<div class="Box">
<div class="container">
<div class="bar" id="bar">
<div class="slider" id="slider-1"></div>
<div class="slider" id="slider-2"></div>
<div class="slider" id="slider-3"></div>
</div>
</div>
<div class="values">
<div class="value" id="value-1">3</div>
<div class="value" id="value-2">4</div>
<div class="value" id="value-3">5</div>
</div>
</div>
</body>
</html>
Slider.js
const slider1 = document.getElementById('slider-1');
const value1 = document.getElementById('value-1');
const slider2 = document.getElementById('slider-2');
const value2 = document.getElementById('value-2');
const slider3 = document.getElementById('slider-3');
const value3 = document.getElementById('value-3');
const bar = document.getElementById('bar');
// let lastOffset = 0;
let lastOffset1 = 0;
let posCurrentX1 = 0;
let lastOffset2 = 0;
let posCurrentX2 = 0;
let lastOffset3 = 0;
let posCurrentX3 = 0;
const barLength = getComputedStyle(bar).width;
const sliderWidth = getComputedStyle(slider1).width;
let travelLength = Math.round(barLength.substring(0,barLength.length - 2)); // -
// sliderWidth.substring(0,sliderWidth.length - 2) / 2;
const range = 100;
slider1.onmousedown = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
document.onmouseup = (event) => {
document.onmousemove = null;
document.onmouseup = null;
lastOffset1 = posCurrentX1;
};
document.onmousemove = (event) => {
event.preventDefault();
posCurrentX1 = lastOffset1 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX1 <= travelLength && posCurrentX1 >= 0) {
// console.log('posCurrentX: ',posCurrentX,'barLength: ',travelLength);
slider1.style.left = `${posCurrentX1}px`;
value1.innerHTML = Math.round((range / travelLength) * posCurrentX1);
}
};
};
slider2.onmousedown = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
document.onmouseup = (event) => {
document.onmousemove = null;
document.onmouseup = null;
lastOffset2 = posCurrentX2;
};
document.onmousemove = (event) => {
event.preventDefault();
posCurrentX2 = lastOffset2 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX2 <= travelLength && posCurrentX2 >= 0) {
// console.log('posCurrentX: ',travelLength);
slider2.style.left = `${posCurrentX2}px`;
value2.innerHTML = Math.round((range / travelLength) * posCurrentX2);
}
};
};
slider3.onmousedown = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
document.onmouseup = (event) => {
document.onmousemove = null;
document.onmouseup = null;
lastOffset3 = posCurrentX3;
};
document.onmousemove = (event) => {
event.preventDefault();
posCurrentX3 = lastOffset3 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX3 <= travelLength && posCurrentX3 >= 0) {
// console.log('posCurrentX: ',posCurrentX3,travelLength);
slider3.style.left = `${posCurrentX3}px`;
value3.innerHTML = Math.round((range / travelLength) * posCurrentX3);
}
};
};
Slider.js (React 版本)
import React,{ Component } from "react";
import "./Slider.css";
let lastOffset1 = 0;
let posCurrentX1 = 0;
let lastOffset2 = 0;
let posCurrentX2 = 0;
let lastOffset3 = 0;
let posCurrentX3 = 0;
const barLength = this.refs.bar.current.width;
const sliderWidth = this.refs.slider1.current.width;
let travelLength = Math.round(barLength.substring(0,sliderWidth.length - 2) / 2;
const range = 100;
class CombinedSlider 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();
};
onmousedown1 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
this.slider1.current.onmouseup = (event) => {
this.slider1.current.onmousemove = null;
this.slider1.current.onmouseup = null;
lastOffset1 = posCurrentX1;
};
this.slider1.current.onMouseMove= (event) => {
event.preventDefault();
posCurrentX1 = lastOffset1 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX1 <= travelLength && posCurrentX1 >= 0) {
// console.log('posCurrentX: ',travelLength);
this.slider1.current.style.left = `${posCurrentX1}px`;
this.value1.current.innerHTML = Math.round((range / travelLength) * posCurrentX1);
}
};
};
onmousedown2 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
this.slider2.current.onmouseup = (event) => {
this.slider2.current.onMouseMove = null;
this.slider2.current.onmouseup = null;
lastOffset2 = posCurrentX2;
};
this.slider2.current.onMouseMove = (event) => {
event.preventDefault();
posCurrentX2 = lastOffset2 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX2 <= travelLength && posCurrentX2 >= 0) {
// console.log('posCurrentX: ',travelLength);
this.slider2.current.style.left = `${posCurrentX2}px`;
this.value2.current.innerHTML = Math.round((range / travelLength) * posCurrentX2);
}
};
};
onmousedown3 = (event) => {
event.preventDefault();
const posInitialX = event.clientX;
this.slider3.current.onmouseup = (event) => {
this.slider3.current.onMouseMove = null;
this.slider3.current.onmouseup = null;
lastOffset3 = posCurrentX3;
};
this.slider3.current.onMouseMove = (event) => {
event.preventDefault();
posCurrentX3 = lastOffset3 + event.clientX - posInitialX;
// console.log(window.innerWidth);
// console.log(document.body.style.width);
if (posCurrentX3 <= travelLength && posCurrentX3 >= 0) {
// console.log('posCurrentX: ',travelLength);
this.slider3.current.style.left = `${posCurrentX3}px`;
this.value3.current.innerHTML = Math.round((range / travelLength) * posCurrentX3);
}
};
};
render() {
return (
<div>
<div className="Box">
<div className="container">
<div className="bar" id="bar">
<div className="slider" id="slider-1" ref={slider1 => this.slider1 = slider1 } onMouseDown={this.onmousedown1} />
<div className="slider" id="slider-2" ref={slider2 => this.slider2 = slider2} onMouseDown={this.onmousedown2}/>
<div className="slider" id="slider-3" ref={slider3 => this.slider3 = slider3} onMouseDown={this.onmousedown3}/>
</div>
</div>
<div className="values">
<div className="value" id="value-1" ref={value1 => this.value1=value1}>
3
</div>
<div className="value" id="value-2" ref={value2 => this.value2=value2}>
4
</div>
<div className="value" id="value-3" ref={value3 => this.value3 = value3}>
5
</div>
</div>
</div>
</div>
);
}
}
export default CombinedSlider;
例如 滑块1.onmousedown =(事件)=> 函数,我应该如何使用 refs 实现相同的行为。我在尝试将 onMouseDown() 事件侦听器附加到它时收到 ref 对象不可扩展和未定义的错误。不知何故,我一直试图复制相同的行为。
除了使用 refs 之外,还有什么优雅的方法可以做到这一点吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)