next.js 范围滑块与reactjs -值变化,但滑块不移动

qvsjd97n  于 2023-10-18  发布在  React
关注(0)|答案(2)|浏览(132)

我在使用库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;
qybjjes1

qybjjes11#

你必须利用国家来做到这一点。

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

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

agyaoht72#

我认为这可能是React的props与使用state相比的问题。正如在https://kentcdodds.com/blog/props-vs-state上发现的那样,当 prop 改变时,DOM不会更新,因此滑块不会移动。
正如react-input-range的官方文档所建议的那样,您应该使用state来更新和读取值。
你的RangeSlider没有扩展React.Component,所以你不能使用state。当然,我不知道你为什么不用

class RangeSlider extends React.Component {

我建议你使用一个扩展了React.Component的类,然后使用state作为值。然后,您可以在值更改时设置状态,如下所示(摘自react-input-range的文档:

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

https://www.robinwieruch.de/react-pass-props-to-component中可以找到一个关于如何将props传递给组件的教程。

我希望这能帮上点忙。

相关问题