带有reactjs的范围滑块 - 值改变但滑块不移动答案

【问题标题】：range slider with reactjs - value changing but slider not moving带有reactjs的范围滑块 - 值改变但滑块不移动
【发布时间】：2020-12-17 13:56:47
【问题描述】：

我在使用库 react-input-range（或任何其他滑块）时遇到问题：我可以看到 console.log(value) 时该值正在正确更改，但是当我移动它时滑块没有移动……不管是不是通过道具。

有什么想法吗？

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;

【问题讨论】：

将值移动到本地状态，因为每次状态更改都会重新呈现。

标签： reactjs next.js

【解决方案1】：

您必须使用 State 来执行此操作。

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

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

【讨论】：

【解决方案2】：

我认为与使用状态相比，这可能是 React 的 props 的问题。正如在https://kentcdodds.com/blog/props-vs-state 上发现的那样，当道具更改时，DOM 不会更新，因此您的滑块不会移动。

根据 react-input-range 官方文档的建议，你应该使用 state 来更新和读取值。

你的 RangeSlider 没有扩展 React.Component 所以你不能使用状态。当然，我不知道你是否有理由不使用类似的东西

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 传递给组件的正确教程。

或者，如其他答案所示，您当然可以使用 useState 挂钩。 (https://reactjs.org/docs/hooks-state.html)。这样你就不必扩展 React 的组件了。

我希望，这会有所帮助。

【讨论】：

谢谢！它运作良好！我现在想知道的是如何在我尝试直接使用道具时将其发送到父组件 - 需要更多调查:)
@Maxiss 您可以在父类中声明一个方法来处理状态更改并将该方法作为道具传递给子类。使用 React Context API 也可能是解决问题的一种方法。您可以在这里查看不同的方法：techiediaries.com/…。干杯:)