Question

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

这里是材质ui演示的链接，它们使用onChange捕获值。我仅在滑块停止时才需要这些值，而在更改时则不需要。

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

Answer 1

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

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>
  );
}```

Answer 2

知道用户是否完成操作的唯一方法是使用onChangeCommitted，但这仅在用户使用鼠标进行交互时有效。如果用户使用箭头键，则onChangeCommitted将为每次更改触发。

您可以等待一段时间才能进行搜索。如果有多个搜索词，用户可以更改，则可以在demo.js中使用useDebounce演示的here代码

const [search, setSearch] = React.useState({ slider1: 10, slider2: 10 });
const onChange = React.useCallback(
  (key, val) => setSearch(search => ({ ...search, [key]: val })),
  []
);
//start searching when user did not change anything for 5 second
//  I know it's a long time but demonstrates behavior more easily
const debouncedSearch = useDebounce(search, 5000);
// Effect for API call
React.useEffect(
  () => {
    console.log("user inactive for five seconds, going to search now");
  },
  [debouncedSearch] // Only call effect if debounced search term changes
);

如果您确实根据用户输入触发了请求，则应确保仅对最后用户输入进行响应。您可以使用上面的代码和here中所示的效果并取消该效果。如果不这样做，您可能会遇到一些意外的比赛情况。

Answer 3

如果您使用超时方法，您会注意到您的滑块动画仅以一秒为间隔更新。最好的方法是添加额外的事件处理程序 -use_stream_ids_as_track_ids true。这样，滑块上的值就会保持更新。

onChangeCommitted

请注意，如果用户使用箭头键调整滑块，则每次增量都会调用 export default function RangeSlider() { const classes = useStyles(); const [value, setValue] = React.useState([20, 37]); const handleChange = (event, newValue) => { setValue(newValue); }; const handleChangeCommitted = (event, newValue) => { // Here will only be triggered once the user releases the slider. }; 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> ); } 处理程序。

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

3 个答案: