时间戳

首页 > 解决方案 > 需要获取滑块 React 的 onChange 的最后一个值

reactjs - 需要获取滑块 React 的 onChange 的最后一个值

问题描述

我正在使用材质 ui 滑块在查询之前获取值。有没有办法只在滑块停止移动而不是每次移动时才获取滑块的值？如果可能，我想避免使用提交按钮。

这是材料 ui 演示的链接，他们使用 onChange 来捕获值。我只需要滑块停止时的值，而不是改变时的值。

https://codesandbox.io/s/material-demo-sss3v

标签： reactjsmaterial-uionchange

解决方案

我可能只是为这样的事情做一个简单的超时。当他们“停止”时，您可以确定您认为合适的内容，大约一秒钟后似乎可以正常工作。

export default function RangeSlider() {
  var timeout;
  const classes = useStyles();
  const [value, setValue] = React.useState([20, 37]);

  const handleChange = (event, newValue) => {
    timeout && clearTimeout(timeout);
    timeout = setTimeout(() => {
      console.log('change');
      setValue(newValue);  
    }, 1000);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
    </div>
  );
}```

推荐阅读