延迟一个字符更新状态

Question

我有 4 个输入字段，我在其中输入金额，并根据该金额获得汇率。

场景：当用户填写字段时，例如在 input1 中输入 20000，比率必须为 116.04，但用户得到的不是 11.60。所以有 1 个字符的明显延迟，只要我在 input2 字段中输入 0，我就会得到正确的速率，即 116.04 这对我来说是不可接受的，因为我总共有 4 个字段，而且数字总是不同的。我该如何解决？？？这是我的状态：

 this.state = {
            input: {
                amount: '20000',
                inputField1: '',
                inputField2: '',
                inputField3: '',
                inputField4: '',
                ...window.input,
            },

这些是我的输入字段：

 <Input className="col-8"
                value={this.state.input.inputField1}
                onChange={(event) => {
                this.updateInputField("inputField1", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField2}
                onChange={(event) => {
                this.updateInputField("inputField2", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField3}
                onChange={(event) => {
                this.updateInputField("inputField3", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField4}
                onChange={(event) => {
                this.updateInputField("inputField4", event.target.value);
                }}/>

这些是我的方法：

updateInput = (key, value) => {
    let input = {...this.state.input};
    input[key] = value;
    window.input = input;
    this.calculate(input);
};

updateInputField= (key, value) => {
    let {input} = this.state;
    let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4
    input[key] = value;
    this.setState({input});
    window.input = input;
    this.updateInput("amount",sum)// this is where I am getting the delay
};

我正在尝试使用此状态的总金额：

<p>{this.state.input.amount}</p>

Answer 1

在您的 updateInputField 函数中 - 不要在更新 input[key] 之前计算 sum ，而是尝试更新更新 input[key]，然后计算sum。像这样：

// first, update 'input' with the new value input[key] = value; // next, calculate the new sum let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4

您看到的“延迟”是因为您的代码遵循以下顺序：

从状态
获取旧的input值
计算旧 input 值的总和

使用 value 更新 input（当前 key 已更新）

这需要是#2，而不是#3！

设置更新后的 input 状态

来电this.updateInput

因此您的新 updateInputField 函数将如下所示：

updateInputField= (key, value) => { let {input} = this.state; // first, update 'input' with the new value input[key] = value; // next, calculate the new sum let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4 this.setState({input}); window.input = input; this.updateInput("amount",sum) };

延迟一个字符更新状态

Delay on updating the state by one character

reactjs

input

onchange