[英]Material-UI: How to get the value in Slider?
I'm using Material-UI Slider and I want to get the value with onChange
function.我正在使用 Material-UI Slider ,我想通过onChange
function 获取值。
My code is like this:我的代码是这样的:
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;
this doesn't work and show this error.这不起作用并显示此错误。
(JSX attribute) onChange?: ((event: React.ChangeEvent<{}>, value: number | number[]) => void) | (JSX 属性) onChange?: ((event: React.ChangeEvent<{}>, value: number | number[]) => void) | undefined No overload matches this call. undefined 没有重载匹配这个调用。 Overload 1 of 2, '(props: { component: ElementType; } & { 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined; 'aria-valuetext'?: string | undefined; color?: "primary" | "secondary" | undefined; ... 18 more...; valueLabelFormat?: string |... 1 more... | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.重载 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',给出了以下错误。 Type '(value: number) => void' is not assignable to type '(event: ChangeEvent<{}>, value: number | number[]) => void'.类型 '(value: number) => void' 不可分配给类型 '(event: ChangeEvent<{}>, value: number | number[]) => void'。 Types of parameters 'value' and 'event' are incompatible.参数 'value' 和 'event' 的类型不兼容。 Type 'ChangeEvent<{}>' is not assignable to type 'number'.类型 'ChangeEvent<{}>' 不可分配给类型 'number'。 Overload 2 of 2, '(props: DefaultComponentProps<SliderTypeMap<{}, "span">>): Element', gave the following error.重载 2 of 2,'(props: DefaultComponentProps<SliderTypeMap<{}, "span">>): Element',给出了以下错误。
Does anyone know how to get it?有谁知道如何得到它?
The onChange
signature from the docs is:文档中的onChange
签名是:
function(event: object, value: number | number[]) => void
The new value is in the second parameter, not the first one of onChange
callback.新值在第二个参数中,而不是onChange
回调的第一个。 Change your code to this:将您的代码更改为:
<Slider {...props} onChange={(_, value) => setInputValue(value)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.