我在使用库react-input-range(或任何其他滑块)时遇到问题:当console.log(value)时,我可以看到值正确地改变了,但是当我移动滑块时,滑块并没有移动.不管是不是通过 prop 。
有什么想法吗?
import React from 'react';
import InputRange from 'react-input-range';
interface Props {
min:number;
max:number;
step?:number;
value:any;
id:string;
}
const RangeSlider = ({ min, max, step=1, value, id }: Props) => {
function onValueChange(newval: any){
console.log(newval);
value=newval;
//some other actions here
}
return (
<div className="slider m-4 mb-6">
<InputRange
minValue={min}
maxValue={max}
step={step}
onChange={onValueChange}
value={value}
/>
</div>
);
};
export default RangeSlider;
2条答案
按热度按时间qybjjes11#
你必须利用国家来做到这一点。
agyaoht72#
我认为这可能是React的props与使用state相比的问题。正如在https://kentcdodds.com/blog/props-vs-state上发现的那样,当 prop 改变时,DOM不会更新,因此滑块不会移动。
正如react-input-range的官方文档所建议的那样,您应该使用state来更新和读取值。
你的RangeSlider没有扩展React.Component,所以你不能使用state。当然,我不知道你为什么不用
我建议你使用一个扩展了React.Component的类,然后使用state作为值。然后,您可以在值更改时设置状态,如下所示(摘自react-input-range的文档:
在https://www.robinwieruch.de/react-pass-props-to-component中可以找到一个关于如何将props传递给组件的教程。
我希望这能帮上点忙。