Reactjs 反应控制组件问题

所以我正在研究一个单位转换器的受控元件——问题是输出比我想要的要慢一步（例如，如果我输入“100”，它将给出10kg的磅值，“1000”->100等等）。我确信修复是显而易见的，但我自己看不到——我还是个新手

import React, { Component } from 'react';

class SearchBar extends Component {
    constructor(){
        super();
        this.state = {
            kg: '',
            lbs: '',
            value: 'kgtolbs',
            userInput: ''
        }
        this.convertKgToLbs.bind(this);
        this.convertLbsToKg.bind(this);
        this.handleOption.bind(this);
        this.handleChange.bind(this);
    }

handleOption(event){

    const selectedValue = event.target.value;
    this.setState({
        value: selectedValue
    });
}

handleChange(event){
    this.setState({
        userInput: event.target.value
    })

    if(this.state.value === 'kgtolbs'){
        this.convertKgToLbs();
    } else {
        this.convertLbsToKg();
    }
}

convertKgToLbs () {
    const kg = this.state.userInput;
    const lbsConversion = kg * 2.205;
    this.setState({
      lbs: lbsConversion.toFixed(1)
    });

}

render(
){
    return(

        <div className="search-bar">
            <input className="input" type="number" onChange={this.handleChange.bind(this)} />
            <select onChange={this.handleOption.bind(this)}>
                <option value="kgtolbs">Kg to Lbs</option>
                <option value="lbstokg">Lbs to kg</option>
            </select>
            <p>{this.state.lbs} </p>
            <p>{this.state.kg} </p>
        </div>

    );
}
}

export default SearchBar;

import React，{Component}来自'React'；
类搜索栏扩展组件{
构造函数（）{
超级（）；
此.state={
公斤：''，
lbs:“”，
值：“kgtolbs”，
用户输入：“”
}
this.convertKgToLbs.bind（this）；
this.convertLbsToKg.bind（this）；
这个.handleOption.bind（这个）；
这个.handleChange.bind（这个）；
}
手持设备（事件）{
const selectedValue=event.target.value；
这是我的国家({
值：selectedValue
});
}
手变（活动）{
这是我的国家({
用户输入：event.target.value
})
如果（this.state.value==='kgtolbs'）{
这个.kgtolbs（）；
}否则{
这个.convertLbsToKg（）；
}
}
收费标准（）{
const kg=this.state.userInput；
常数LBS换算=kg*2.205；
这是我的国家({
lbs:lbs转换为固定值（1）
});
}
渲染(
){
返回(
千克至磅
磅至千克
{this.state.lbs}

{this.state.kg}

);
}
}
导出默认搜索栏；

---

感谢您的帮助-谢谢

setState

是一个异步函数。这意味着在使用

This.state.value

时，在

handleChange

函数中，状态实际上尚未更新

setState

有一个回调处理程序，确保在运行后执行任务。在您的情况下，您可以执行以下操作：

handleChange(event){
    this.setState({
        userInput: event.target.value
    }, function() {
        if(this.state.value === 'kgtolbs'){
            this.convertKgToLbs();
        } else {
            this.convertLbsToKg();
        }
    });
}