React Js 数学问题

Question

我的 react 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 方法只在状态更新时被调用，所以你确定你在这里得到了最后一个状态:)