reactjs - Material-UI: Hur får man värdet i Slider?

Jag använder Material-UI Slider och jag vill få värdet med onChange-funktionen.

Min kod ser ut så här:

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;

det här fungerar inte och visar detta fel.

(JSX-attribut) onChange?: ((event: React.ChangeEvent<{}>, value: number | number[]) => void) | undefined Ingen överlagring matchar detta anrop. Överlagring 1 av 2, '(props: { component: ElementType; } & { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined; 'aria-valuetext'?: string | undefined; color?: "primary" | "secondary" | undefined; ... 18 till ...; valueLabelFormat?: string | ... 1 till mer ... | undefined; } & CommonProps<...> & Pick<. ..>): Element', gav följande fel. Typ '(value: number) => void' kan inte tilldelas till typ '(event: ChangeEvent<{}>, value: number | number[]) => void'. Typerna av parametrarna 'value' och 'event' är inkompatibla. Typ 'ChangeEvent<{}>' kan inte tilldelas till typ 'number'. Överlagring 2 av 2, '(props: DefaultComponentProps>): Element', gav följande fel.

Vet någon hur man får tag på det?

Svar #1

Signaturen för onChange från dokumentationen är:

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

Det nya värdet finns i den andra parametern, inte den första i onChange-callbacken. Ändra din kod till detta:

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

Svar #2

Du behöver ändra updateRange-funktionen till något liknande detta:

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