はJsの数学の問題が

Question

私はとの問題がjsの反応持って反応し、私はそれが仕事を得るように見えることはできません。

私は3000までの値をパーセントに変えて、ブートストラップのパーセンテージバーに正しい量を書き込むようにしていますが、ランダムな値を引き出しています。

私は箱の中に 480を入力した場合、たとえば、私は繰り返し0.13の出力割合を得るとき、私はことを働いてきたが、私は480.00を入力する場合、私は正しいです16%を取得します。

もちろん、私は、彼らが何かを指定したが、私はautoにそれを得ることができないで追加されていない場合.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 

値が更新されました確かに、状態はで、今

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

を更新されたときに呼び出されるコールバックであるあなたがsetStateに与えることができます2番目のパラメータはありあなたの場合、私はあなたがコールバックメソッドを使用する必要はないと思います。 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メソッドのみ呼び出されます。ここでは

は私があなただったら、私はどうなるのかです