Question

我对反应js有一个问题，我似乎无法让它发挥作用。

我将最多3000的值转换为百分比，以便它以正确的数量填充引导百分比条，但我不断从中获取随机值。

我已经研究过，例如，当我输入时在480框中我得到了0.13重复出现的输出百分比，但如果我输入480.00，我会16%这是正确的。

显然，如果他们没有指定某些内容，我必须在.00中自动添加人工证明，但我无法自动添加。

onChange = (e) => {
    console.log(e.target.value)
    this.setState({ sliderValue: e.target.value });
    this.updateSlideValue();
}
updateSlideValue(){
    console.log(this.state.sliderValue);
    this.setState({slideValue: this.state.sliderValue / 3000 * 100});
    console.log("gets to update Slide Value");
    console.log(this.state.slideValue);
}

然后这是我的html / jsx调用它

<div>
    <div class="col-md-12">
        <div class="col-md-9">
            <div class="progress">
                <div class="progress-bar progress-bar-info" style={SlideValue}></div>
            </div>
        </div>
        <div class="col-md-3">
            <input style={rangeSliderClass} className="range-slider__value form-control" onChange={this.onChange.bind(this)} type="number" value={this.state.sliderValue}></input>
        </div>
    </div>
  </div>

Answer 1

这是React的一个常见错误。实际上setState是异步的。这意味着，当您调用它时，您没有保证它会在下一条指令中更新。

// imagine this.state.value === 0
this.setState({ value: 1 })
// this.state.value => still 0

为了确保该值已更新，您可以为setState提供第二个参数，这是一个在状态更新后将被调用的回调

// imagine this.state.value === 0
this.setState({ value: 1 }, () => {
  this.state.value // => 1
})
// this.state.value => still 0

现在，在您的情况下，我认为您不需要使用回调方法。我认为您可以直接在render方法中计算百分比，因为这只是显示原始数据的一种方式。

如果我是你，我会怎么做：

onChange(e) {
    this.setState({ sliderValue: e.target.value });
}

render(props) {
  var slideValue = this.state.sliderValue / 3000 * 100;

  return (<div>
    ... 
    <div style={{ width: slideValue + "%" }}></div>
    ...
   </div>)
}

仅在状态更新时调用render方法，因此您确定在此处获得最后一个状态：）

反应Js数学问题

1 个答案: