Question

我正试图找到一种方法，该方法仅在Material UI滑块的鼠标释放时更新新状态。同时保持在轨道上滑动并实时查看更改的能力。

材料UI提供2个事件：onChange和onChangeCommitted。第二个提供了我需要的最终结果，但是轨迹的滑动槽是实时可见的，只有在释放鼠标时，您才能看到停止了什么值。这是我的组件：

export default function RangeSlider() {
  const classes = useStyles();
  const [range, setRange] = React.useState([0, 37]);

  const handleRange = (event, newValue) => {
    setRange(newValue);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range (onChangeCommitted event)
      </Typography>
      <Slider
        value={range}
        min={0}
        max={50}
        onChangeCommitted={handleRange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </div>
  );
}

我想找到一种能够实时滑动并在释放鼠标时更新状态的方法。有没有简单的方法可以做到这一点？

也请查看此Sandbox，在此向您展示2个示例：

首先是我需要的滑动体验
第二种是更新状态的方法

Answer 1

您必须结合示例：

   <Slider
    value={value}
    min={0}
    max={50}
    onChange={handleChange}
    onChangeCommitted={handleRange}
    valueLabelDisplay="auto"
    getAriaValueText={valuetext}
  />

Answer 2

为什么不仅仅为已更改的状态设置第二状态？

请参见sandbox

编辑：下面的代码。

添加范围提交状态：

const [value2, setValue2] = React.useState([0, 37]);

在范围提交处理程序上（注意：我设置为当前状态，与该函数给我的鼠标事件无关）

const setVal2 = () => setValue2(value);

除了onChange之外，还添加范围提交处理程序prop：

   onChange={handleChange}
   onChangeCommitted={setVal2}

显示提交状态：

    <Typography id="range-slider" gutterBottom>
        Temperature range (onChange event) - {value2[0]}:{value2[1]}
    </Typography>

材质UI滑块组件，在释放鼠标时更新状态，同时实时滑动

2 个答案: