Material-UI：如何获取 Slider 中的值？答案

【问题标题】：Material-UI: How to get the value in Slider?Material-UI：如何获取 Slider 中的值？
【发布时间】：2021-04-18 04:53:53
【问题描述】：

我正在使用 Material-UI Slider，我想通过 onChange 函数获取值。

我的代码是这样的：

const SliderScale: React.FC = () => {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState(0);

  const updateRange = (value: number) : void => {
    setInputValue(value);
  };


  return (
    <div className={classes.root}>
      <Typography id="discrete-slider" gutterBottom>
        value
      </Typography>
      <Slider
        defaultValue={0}
        value={inputValue}
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="on"
        step={0.5}
        marks={false}
        min={0}
        max={10}
        onChange={updateRange}
      />
    </div>
  );
};

export default SliderScale;

这不起作用并显示此错误。

(JSX 属性) onChange?: ((event: React.ChangeEvent, value: number | number[]) => void) |不明确的没有重载匹配此调用。重载 1 of 2, '(props: { component: ElementType; } & { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined; 'aria-valuetext'?: string | undefined; color?: "primary" | "secondary" | undefined; ... 18 个 ...; valueLabelFormat?: string | ... 1 个 ... | undefined; } & CommonProps<...> & Pick<. ..>): Element'，给出了以下错误。类型 '(value: number) => void' 不可分配给类型 '(event: ChangeEvent, value: number | number[]) => void'。参数 'value' 和 'event' 的类型不兼容。类型 'ChangeEvent' 不可分配给类型 'number'。重载 2 of 2, '(props: DefaultComponentProps>): Element'，出现以下错误。

有人知道怎么弄吗？

【问题讨论】：

标签： reactjs typescript material-ui slider

【解决方案1】：

来自docs 的onChange 签名是：

function(event: object, value: number | number[]) => void

新值在第二个参数中，而不是onChange回调的第一个。将您的代码更改为：

<Slider {...props} onChange={(_, value) => setInputValue(value)} />

【讨论】：

谢谢。我改变了它，但仍然无法正常工作。这次这个错误显示在值上。＞（参数）值：数字 | number[] 类型参数 'number | number[]' 不可分配给“SetStateAction”类型的参数。类型 'number[]' 不可分配给类型 'SetStateAction'。类型 'number[]' 不能分配给类型 'number'。
@knkn 将值转换为数字，因为它可以是 number 或 number 的数组：onChange={(_, value) => setInputValue(value as number)}

【解决方案2】：

您需要将updateRange 函数更改为如下内容：

const updateRange  = (event: React.ChangeEvent<{}>, newValue: number | number[]) => {
    setInputValue(newValue as number[]);
}

【讨论】：