Question

我正在用React创建一个简单的应用程序，我对React的了解已有一个星期了，所以请原谅我可能做过的任何疏忽，或对我编写的要尝试使用的代码的任何愚蠢之处使它起作用。

我正在使用Nouislider的React版本： https://github.com/algolia/react-nouislider

并在此处引用Nouislider的原始文档： https://refreshless.com/nouislider/

我能够创建一个滑块，并使用onChange道具触发一个函数。首先，我将输出记录到控制台，并验证该值正确。但是，当我尝试使用this.setState更新状态时，它会将滑块恢复为0，并且状态获得的是不确定的值，而不是滑块的值。

这是我当前的代码：

构造函数：

constructor(props) {
  super(props);
  this.state = {
    matchWinnerScore: "",
  }
  this.handleWinnerClick = this.handleWinnerClick.bind(this);
}

渲染功能内的滑块：

<Nouislider
    start={[0]}
    connect={[true, false]}
    step={1}
    range={{ min: 0, max: 30 }}
    onChange={this.handleWinnerScoreChange}
/>

onChange函数：

handleWinnerScoreChange(event) {
  console.log(event[0]);
  this.setState({
       matchWinnerScore: event[0]
    });
  console.log(this.matchWinnerScore);
}

在控制台中，输出为：

14.00
undefined

我们非常欢迎您提供任何帮助，想法或建议。我碰到了砖墙，需要一双新鲜的眼睛来引导我朝正确的方向前进。

期待您的回复！

Answer 1

我对该库有完全相同的问题： https://github.com/leongersen/noUiSlider

不幸的是，我必须为我的文本（或将滑块值绑定到的内容）创建一个带有引用的子组件。在这样的基本组件上使用ref是可行的，但显然并不理想。

父组件（仅显示相关内容）

  onChangeSlide = (values, handle, unencoded, tap, positions) => {
    let { challengeObject } = this.props;

    this.refs['ProgressText' + challengeObject.id].updateProgress(parseInt(values[0]))
  }

  componentDidMount = () => {
    let uiSlider = this.refs['NoUiSlider' + challengeObject.id].slider
    uiSlider.on('update', this.onChangeSlide);
    uiSlider.on('end', function () {
      //save it to db
    });
  }

  render() {
    const { classes, challengeObject } = this.props;

    return (
      <div>
        <Nouislider
          ref={'NoUiSlider' + challengeObject.id}
          start={[challengeObject.progress['startValue']]}
          connect={[true, false]}
          step={1}
          range={{
            min: 0,
            max: challengeObject.progress['targetValue'] 
          }}
        />

        <ProgressText
          ref={'ProgressText' + challengeObject.id}
          startValue={challengeObject.progress['targetValue']}
          endValue={challengeObject.progress['targetValue']}
        />
      </div>
    );
  }

子组件

import React from "react";

class ProgressText extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        startValue: this.props.startValue
    }
  }

  updateProgress = (val) => {
      this.setState({ startValue: val })
  }

  render() {
    let { endValue } = this.props;
    let { startValue } = this.state

    return (
        <span>  
            {startValue + '/' + endValue}
        </span>
    );
  }
}

export default ProgressText;

React Nouislider-onChange和setState问题，滑块重置为0，并且状态无值

1 个答案: