使用 React refs - 编程之家

如何解决使用 React refs

嗨，我正在尝试将具有多个拇指代码的滑块的以下 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 之外，还有什么优雅的方法可以做到这一点吗？