Reactjs 带材质ui的条件滑块

我试图在React中构造一个单一的滑块组件，使我能够选择是要一个具有两个值还是一个值的滑块，并将它们存储在组件状态。有两个值的滑块可以正常工作，但是只有一个值的滑块不会移动，但是，我可以通过console.log（）来确定正确的值。我能做些什么来修复它

import React from "react";
import Slider from "@material-ui/core/Slider";

export default function GameOptions() {
  return (
    <div className="screen">
      <GameSlider values={1} max={50} />
      <GameSlider values={2} max={50} />
    </div>
  );
}

function GameSlider(props) {
  const [value, setValue] = React.useState([0, props.max]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
    console.log(newValue);
  };

  const getValue = () => {
    if (props.values == 1) {
      return value[1];
    }
    return value;
  };

  const getSliderType = () => {
    if (props.values == 1) {
      return "range-slider";
    }
    return "continuous-slider";
  };

  return (
    <Slider
      value={getValue()}
      onChange={handleChange}
      valueLabelDisplay="auto"
      aria-labelledby={getSliderType()}
    />
  );
}

从“React”导入React；
从“@material ui/core/Slider”导入滑块；
导出默认函数GameOptions（）{
返回(
);
}
功能游戏滑块（道具）{
const[value，setValue]=React.useState（[0，props.max]）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
console.log（newValue）；
};
常量getValue=（）=>{
如果（props.values==1）{
返回值[1]；
}
返回值；
};
常量getSliderType=（）=>{
如果（props.values==1）{
返回“范围滑块”；
}
返回“连续滑块”；
};
返回(
);
}

使用“连续滑块”时，

handleChange

函数接收的值将是单个数值，而不是数字数组。因此，您的

handleChange

函数应该这样对待它

const handleChange = (event, newValue) => {
    setValue((props.values == 1) ? [newValue, newValue] : newValue);
    console.log(newValue);
};

此外，我认为您的

getSliderType

函数应该是另一种方式

const getSliderType = () => {
    return (props.values == 1) ? "continuous-slider" : "range-slider";
};