陣營的js數學問題

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方法只調用，所以你肯定你在這裏得到的最後狀態:)