在 React JS 中使用播放和停止按钮控制 material-ui slider

Question

我在 ReactJS 项目中使用来自 metrial-ui 的连续 slider。 我想控制 slider 以便当点击播放按钮时 slider 开始移动并在点击停止时停止。下面是 slider 的代码。

   const useStyles = makeStyles({
  root: {
    width: 200,
  },
});
         
<div className={classes.root}>
      <Typography id="continuous-slider" gutterBottom>
        Volume
      </Typography>
      <Grid container spacing={2}>
        <Grid item>
          <VolumeDown />
        </Grid>
        <Grid item xs>
          <Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />
        </Grid>
        <Grid item>
          <VolumeUp />
        </Grid>
      </Grid>

提前致谢

Answer 1

这可以通过调用setState在间隔后更新Slider值来完成。 当isRunning state 发生变化时，您需要使用useEffect创建和清理间隔回调：

export default function ContinuousSlider() {
  const [value, setValue] = useState<number>(30);
  const [isRunning, setIsRunning] = useState(false);
  const directionRef = useRef<"back" | "forward">("back");
  const intervalIdRef = useRef(0);

  const handleChange = (event: any, newValue: number | number[]) => {
    setValue(newValue as number);
  };
  const handleBack = () => {
    directionRef.current = "back";
    if (!isRunning) {
      setIsRunning(true);
    }
  };
  const handleNext = () => {
    directionRef.current = "forward";
    if (!isRunning) {
      setIsRunning(true);
    }
  };
  const handleStop = () => {
    setIsRunning((r) => !r);
  };

  useEffect(() => {
    if (isRunning) {
      intervalIdRef.current = setInterval(() => {
        if (directionRef.current === "forward") {
          setValue((v) => ++v);
        }
        if (directionRef.current === "back") {
          setValue((v) => --v);
        }
      }, 16);
    }

    return () => clearInterval(intervalIdRef.current);
  }, [isRunning]);

  return (
    <>
      <IconButton onClick={handleStop}>
        <StopIcon />
      </IconButton>
      <IconButton onClick={handleBack}>
        <ArrowBackIcon />
      </IconButton>
      <IconButton onClick={handleNext}>
        <ArrowForwardIcon />
      </IconButton>
      <Slider value={value} onChange={handleChange} />
    </>
  );
}

现场演示