我一直在挖掘并偶然發現了setPointerCapture()解決我的問題的方法。
它的功能是完全按照我對我的代碼所做的，但使用pointer events.?它使元素在 pointerdown 事件上移動并使其在 pointerup 事件上停止移動。
因為它幾乎完成了我需要做的所有事情，所以我可以擺脫我正在使用的一些功能。事實上，唯一保留的功能是handleChange.?除此之外，我還刪除了move狀態，但我必須添加一些refs才能獲取每個元素。
這是新代碼：
import React, { Fragment } from 'react'
import './Filter.css'
const Filter = props => {
? ? const sliderRef = React.useRef() // => main parent div
? ? const sliderRef = React.useRef() // => Div que engloba o slider
? ? const thumb_1_Ref = React.useRef() // => Div que engloba o slider
? ? const thumb_2_Ref = React.useRef() // => Div que engloba o slider
? ? const price_thumb_1_Ref = React.useRef() // => Div que engloba o slider
? ? const price_thumb_2_Ref = React.useRef() // => Div que engloba o slider
? ??
? ? const initial_position = 0?
? ??
? ? const initial_min_value = 5 // => Initial price?
? ? const initial_max_value = 1290 // => Final price
? ? let [thumb1_position, setValueThumb1] =? React.useState(0)
? ? let [thumb2_position, setValueThumb2] =? React.useState(0)
? ? let [mobile_thumb1_position, setValueMobileThumb1] =? React.useState(0)
? ? let [mobile_thumb2_position, setValueMobileThumb2] =? React.useState(0)
? ? let [min_value, setMinValue] =? React.useState(initial_min_value)
? ? let [max_value, setMaxValue] =? React.useState(initial_max_value)
? ??
? ? // Ensure that the thumb_2 will be in the end of the slider at first
? ? React.useEffect(() => {
? ? ? ? setValueThumb2(sliderRef.current.offsetWidth - 5)
? ? }, [])
? ? let slider
? ? let slider_price
? ? const beginSliding = e => {
? ? ? ? slider.onpointermove = slide
? ? ? ? slider.setPointerCapture(e.pointerId)
? ? }
? ??
? ? const stopSliding = e => {
? ? ? ? slider.onpointermove = null
? ? ? ? slider.releasePointerCapture(e.pointerId)
? ? }
? ??
? ? const slide = e => {
? ? ? ? const thumb_class = e.target.className
? ? ? ? let rect = sliderRef.current.getBoundingClientRect()
? ? ? ? let current_position = e.clientX - rect.left?
? ? ? ??
? ? ? ? if (thumb_class.includes('right-thumb')) {
? ? ? ? ? ? current_position = current_position - sliderRef.current.offsetWidth
? ? ? ? ? ? if (current_position >= initial_position) {
? ? ? ? ? ? ? ? current_position = initial_position
? ? ? ? ? ? }
? ? ? ? ? ? if (current_position <= mobile_thumb1_position - 175) {
? ? ? ? ? ? ? ? current_position = mobile_thumb1_position - 175
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? setValueMobileThumb2(current_position)
? ? ? ? }?
? ? ? ??
? ? ? ? if (thumb_class.includes('left-thumb')) {
? ? ? ? ? ? if (current_position <= initial_position) {
? ? ? ? ? ? ? ? current_position = initial_position
? ? ? ? ? ? }
? ? ? ? ? ? if (current_position >= mobile_thumb2_position + 175) {
? ? ? ? ? ? ? ? current_position = mobile_thumb2_position + 175
? ? ? ? ? ? }
? ? ? ? ? ? setValueMobileThumb1(current_position)
? ? ? ? }
? ? ? ??
? ? ? ? slider.style.transform = `translate(${current_position}px)`
? ? ? ? slider_price.style.transform = `translate(${current_position}px)`
? ? }
? ? ? ??
? ??
? ? const handleChange = e => {
? ? ? ? const thumb_class = e.target.className
? ? ? ? if (thumb_class.includes('left-thumb')) {
? ? ? ? ? ? slider = thumb_1_Ref.current;
? ? ? ? ? ? slider_price = price_thumb_1_Ref.current;
? ? ? ? ? ? slider.onpointerdown = beginSliding;
? ? ? ? ? ? slider.onpointerup = stopSliding;
? ? ? ? ? ? if (mobile_thumb1_position - initial_position < 1) {
? ? ? ? ? ? ? ? setMinValue(initial_min_value)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? setMinValue((mobile_thumb1_position - initial_position) * 6.45)
? ? ? ? ? ? }
? ? ? ? } else if (thumb_class.includes('right-thumb')) {
? ? ? ? ? ??
? ? ? ? ? ? slider = thumb_2_Ref.current;
? ? ? ? ? ? slider_price = price_thumb_2_Ref.current;
? ? ? ? ? ? slider.onpointerdown = beginSliding;
? ? ? ? ? ? slider.onpointerup = stopSliding;
? ? ? ? ? ? if (mobile_thumb2_position > -1) {
? ? ? ? ? ? ? ? setMaxValue(initial_max_value)
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? setMaxValue((mobile_thumb2_position + 200) * 6.45)
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? return (
? ? ? ? <Fragment>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h6 style={{marginBottom: '35px'}}>PRICE FILTER</h6>
? ? ? ? ? ? ? ? <div className="range-container"
? ? ? ? ? ? ? ? ? ? onMouseMove={(e) => handleChange(e)}
? ? ? ? ? ? ? ? ? ? ref={sliderRef}
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <div className="range"
? ? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? ? ? <span?
? ? ? ? ? ? ? ? ? ? ? ? ? ? className="rounded-circle left-thumb"
? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width:'15px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: '15px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: 'red',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginTop: '-6px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft: thumb1_position - 7 + 'px'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ref={thumb_1_Ref}
? ? ? ? ? ? ? ? ? ? ? ? ></span>
? ? ? ? ? ? ? ? ? ? ? ? <span?
? ? ? ? ? ? ? ? ? ? ? ? ? ? className="rounded-circle right-thumb"
? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width:'15px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: '15px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: 'black',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginTop: '-6px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft: thumb2_position - 7 + 'px'
? ? ? ? ? ? ? ? ? ? ? ? ? ? }}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ref={thumb_2_Ref}
? ? ? ? ? ? ? ? ? ? ? ? ></span>
? ? ? ? ? ? ? ? ? ? ? ? <p style={{
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft: thumb1_position - 15 + 'px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'absolute',
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginTop: '15px'}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ref={price_thumb_1_Ref}
? ? ? ? ? ? ? ? ? ? ? ? > {Math.floor(min_value)}
? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? <p style={{
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft: thumb2_position - 15 + 'px',
? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'absolute',
? ? ? ? ? ? ? ? ? ? ? ? ? ? marginTop: '15px'}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ref={price_thumb_2_Ref}
? ? ? ? ? ? ? ? ? ? ? ? > {Math.floor(max_value)}
? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </Fragment>
? ? )
}
export default Filter?
