Reactjs 输入范围滑块，因为react挂钩不滑动

我正在尝试使用React钩子制作一个基本的输入范围滑块组件。 但是，滑动实际值旋钮不起作用。 只有直接单击幻灯片轨迹上的新值位置才能更改该值

代码笔示例：

这是我当前的组件代码，上面的代码笔复制了它：

import React, { useState } from "react";

const useSlider = (min, max, defaultState, label, id) => {
  const [state, setSlide] = useState(defaultState);
  const handleChange = e => {
    setSlide(e.target.value);
  };

  const Slider = () => (
    <input
      type="range"
      id={id}
      min={min}
      max={max}
      step={10}
      value={state}
      onChange={handleChange}
    />
  );

  return [state, Slider, setSlide];
};

export default useSlider;

import React，{useState}来自“React”；
常量UseSlaider=（最小值、最大值、默认状态、标签、id）=>{
const[state，setSlide]=使用状态（defaultState）；
常量handleChange=e=>{
设置滑动（即目标值）；
};
常量滑块=（）=>(
);
返回[状态、滑块、设置滑块]；
};
导出默认滑块；

---

我想点击旋钮并左右滑动它，启动

onChange

功能，并在值发生变化时触发

setState

。

您的组件在每次更新滑块时都会设置状态，因此组件会重新渲染，您会失去对滑块手柄的关注或控制。相反，您应该在与句柄的交互完成时更新状态

//import { useState } from 'react';
const { useState } = React;

const useSlider = (min, max, defaultState, label, id) => {
  const [state, setSlide] = useState(defaultState);
  const handleChange = e => {
    console.log('setting level', e.target.value)
    setSlide(e.target.value);
  };

  const Slider = () => (
    <input
      type="range"
      id={id}
      min={min}
      max={max}
      step={0.5}
      // value={state} // don't set value from state
      defaultValue={state} // but instead pass state value as default value
      onChange={e => console.log(e.target.value)} // don't set state on all change as react will re-render
      onMouseUp={handleChange} // only set state when handle is released
    />
  );
  return [state, Slider, setSlide];
};

const App = () => {
  const [slideValue, Slider] = useSlider(
    1,
    100,
    70,
    "Threshold",
    "threshold"
  );
  return (
    <div>
      <Slider />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('app'))

//从'react'导入{useState}；
const{useState}=React；
常量UseSlaider=（最小值、最大值、默认状态、标签、id）=>{
const[state，setSlide]=使用状态（defaultState）；
常量handleChange=e=>{
console.log（'设置级别'，例如target.value）
设置滑动（即目标值）；
};
常量滑块=（）=>(
);
返回[状态、滑块、设置滑块]；
};
常量应用=（）=>{
常量[slideValue，Slider]=使用Slider(
1.
100,
70,
“门槛”，
“阈值”
);
返回(
);
}
ReactDOM.render（，document.getElementById（'app'））

每次调用此钩子时，您都会定义一个全新的滑块功能组件。应用程序第一次渲染时，您将渲染滑块版本1.0。第二次，渲染滑块版本2.0。它们可能有非常相似的代码，但它们是不同的组件，因此react会卸载旧组件并装载新组件。因此，旧的输入将从dom中删除，新的输入将被放置到位，您不再拖动任何内容

钩子不适合动态创建组件。通过记忆滑块组件，您可以在一定程度上改善这一点，但只要您出于任何原因必须打破记忆，就必须定义一个全新的组件，并且此问题或类似问题将再次出现

相反，我建议UseSloider返回道具，然后让调用者将它们放到标准的

input

组件中。由于组件总是属于同一类型，因此将不再卸载和重新装载该组件

const useSlider = (min, max, defaultState, label, id) => {
  const [state, setSlide] = useState(defaultState);
  const handleChange = e => {
    console.log('setting level', e.target.value)
    setSlide(e.target.value);
  }

  const props = { 
    type: 'range',
    id,
    min,
    max,
    step: 0.5,
    value: state,
    onChange: handleChange
  }
  return props
}

const App = () => {
  const sliderProps = useSlider(1, 100, 70, "Threshold", 'threshold');
  return (
    <div>
      <input {...sliderProps}/>
    </div>
  )
};

const useslaider=（最小值、最大值、默认状态、标签、id）=>{
const[state，setSlide]=使用状态（defaultState）；
常量handleChange=e=>{
console.log（'设置级别'，例如target.value）
设置滑动（即目标值）；
}
常量props={
键入：“范围”，
身份证件
闵，
最大值，
步骤：0.5，
价值：国家，
onChange:handleChange
}
返回道具
}
常量应用=（）=>{
常量sliderProps=UseSlaider（1100,70，“阈值”，“阈值”）；
返回(
)
};
避免设置状态在ReReNER发生时延迟，但是如果组件有任何其他原因（例如，一些父组件在拖动的中间设置状态），那么问题将再次出现。