如何在 Material UI 的 Slider 中将 null 设置为默认值答案

【问题标题】：How can I set null as default value in Slider from Material UI如何在 Material UI 的 Slider 中将 null 设置为默认值
【发布时间】：2021-02-25 12:16:19
【问题描述】：

我正在检查文档，看起来Slider 要求值是整数，并且还回退到第一项或最后一项，以防我传递的数字不在滑块的值列表中。

我正在创建一个要求用户选择其中一项的组件：

Never | Rarely | Sometimes | Frequently | Almost always | Always

但是选择一个初始的对我来说没有意义。这些选项最初应显示为未选择任何选项。这是不是 Slider 不是为了做这些事情而创建的？看起来很简单，没有默认值。我错过了什么吗？

材质 UI 滑块文档：https://material-ui.com/api/slider/

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

目前，没有价值的 MuiSlider 是不可能的。它将从defaultValue 或value 中选择值。

对于你的用例，如果你需要使用 Slider 组件，你需要引入一个额外的值（仅用于 UI）

import { Typography, Slider } from "@material-ui/core";

const marks = [
  { label: "None", value: 0 },
  {
    label: "Never",
    value: 1
  },
  {
    label: "Rarely Sometimes",
    value: 2
  },
  {
    label: " Frequently",
    value: 3
  },
  {
    label: "Almost always",
    value: 4
  },
  {
    label: "Always",
    value: 5
  }
];


export default function DiscreteSlider() {

  const [sliderValue, setSliderValue] = useState(marks[0].value);

  const onSliderValueChange = (e, val) => {
    setSliderValue(val);
  };
  return (
    <div>
      <Typography id="discrete-slider" gutterBottom>
        Slider
      </Typography>
      <Slider
        aria-labelledby="discrete-slider"
        valueLabelDisplay="off"
        value={sliderValue}
        onChangeCommitted={onSliderValueChange}
        marks={marks}
        min={0}
        max={5}
      />
    </div>
  );
}

否则，您还可以检查实验室版本中可用的 Rating 组件，并将其评级与您的选择值映射。

import Rating from "@material-ui/lab/Rating";
import Typography from "@material-ui/core/Typography";

export default function SimpleRating() {
  const [value, setValue] = React.useState(0);

  return (
    <div>
      <Rating
        name="simple-controlled"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      />
    </div>
  );
}

【讨论】：