输入范围滑块作为反应钩不滑动

Question

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

示例代码笔：https ://codepen.io/rmichels/pen/WNegjyK

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

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;

我想点击旋钮并向左和向右滑动，触发onChange函数并setState在值改变时触发它。

Answer 1

您的组件在每次更新滑块时都会设置状态，因此组件会重新渲染，并且您会失去焦点或按住滑块手柄。相反，您应该在与句柄的交互完成时更新状态。

//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'))