html - React Js 数学问题

Question

我对 React js 有疑问，我似乎无法让它工作。

我正在将一个高达 3000 的值转换为一个百分比，这样它将以正确的数量填充 Bootstrap 百分比条，但我一直从中获取随机值。

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