Question

所以我正在研究单位转换器的受控组件-问题是输出比我想要的要落后一步（例如，如果我输入“ 100”，它将给出10kg的磅值， “ 1000”-> 100等）。我敢肯定修复是显而易见的，但我自己看不到-我仍然是React新手！

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;

任何帮助表示赞赏-谢谢！

Answer 1

setState是一个异步函数。这意味着在使用handleChange的{{1}}函数中，状态实际上尚未更新。 this.state.value有一个回调处理程序，可确保在运行后执行操作。就您而言，您可以执行以下操作：

setState

React-受控组件问题

1 个答案: