Question

我正在尝试在React中构造单个Slider组件，这将使我能够选择是否要使用两个值或一个值的滑块，并将它们存储在组件状态中。具有两个值的滑块工作正常，但是只有一个值的滑块不会移动，但是，我可以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()}
    />
  );
}

Answer 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";
};

带材质UI的条件滑块

1 个答案: