Question

我有一个使用图书馆反应-射线(或任何其他电梯)的问题: 我可以看到,当古典(价值)时,价值正在正确变化,但是,当我移动时,梯子确实没有移动。无论是否通过推进剂。

任何想法?

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;

Answer 1

I think this might be an issue with React s props in contrast to using a state. As found on https://kentcdodds.com/blog/props-vs-state, the DOM isn t updated when a prop changes so your slider won t move.

正如反应-射线官方文件所建议的那样,你应使用国家更新和阅读这一数值。

您的经历 Slider don t extension React. 部件使你无法使用。当然,我不知道你为什么不使用类似的东西。

class RangeSlider extends React.Component {

I would suggest you use a class which extends React.Component and then use state for the value. You can then set the state when the value changes, like so (taken from react-input-range s documentation:

onChange={value => this.setState({ value })}

关于将推进剂移至部件的适当辅导可在。

Or,如其他答复所示,你当然可以使用使用国。 (https://reactjs.org/docs/hooks-state.html。那么,你不必延长休息时间。

我希望,这帮助了结。

Answer 2

你们必须利用国家这样做。

const [value,setValue] = React.useState(value);

function onValueChange(newval: any){
   setValue(newval)
}

友情链接