Блог

У меня есть 4 поля ввода, в которые я ввожу сумму, и на основе этой суммы я получаю ставку.

Сценарий: когда пользователь заполняет поле, например, вводит 20000 в input1, скорость должна быть 116,04, но вместо этого пользователь получает 11,60. Таким образом, существует очевидная задержка в 1 символ, и как только я помещаю 0 в поле input2, я получаю правильную скорость, равную 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>
 

В вашей updateInputField функции — вместо вычисления sum перед обновлением input[key] , попробуйте обновить обновление 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
 

«Задержка», которую вы видите, связана с тем, что ваш код следует этому порядку:

1. Получает старые input значения из состояния
2. Вычисляет сумму старых input значений
3. Обновления input (в текущем key , который был обновлен) с value
   • Это должно быть # 2, а не # 3!
4. Устанавливает обновленное input состояние
5. Вызывает 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)
};