Реагируйте изменением входного значения на другое входное значение, используя ошибку условия if

Question

Я использую реагирование и пытаюсь изменить значение входа на другой вход, используя условие if. Я сталкиваюсь с ошибкой, когда входное значение изменяется на предыдущее значение, а не текущее. Пример: я ввожу 1 в input1, а input2 остается пустым. Затем я добавляю 0 к входу 1, делая значение 10, второй вход затем меняет свое значение на 1. Затем я удаляю 0 из входа 1, снова делая значение 1, а второй вход меняется на 10.

Я использую useState, вот мой код:

import React, { useState } from 'react'

export default function () {
    const [select1, setSelect1] = useState("test")
    const [input1, setInput1] = useState("")
    const [input2, setInput2] = useState("")

    function select1Function(e) {
        setInput1(e.target.value)
        if (select1 === "test") {
            setInput2(input1)
            document.getElementById("input2").disabled = true
        } else {
            document.getElementById("input2").disabled = false
        }
    }
    return (
        <div>

            <select value={select1} onChange={e => setSelect1(e.target.value)}>
                    <option value="test">Test</option>
                    <more options here (irrelevant to question)>
            </select>

            <input type="number" value={input1} onChange={select1Function}></input>
            <input type="number" value={input2} onChange={e => setInput2(e.target.value)} id="input2"></input>

        </div>
    )
}

Значение input2 задерживается на один символ, и я не могу понять, почему. Буду признателен за любую помощь и заранее спасибо.

Answer 1

Вызов setState не является синхронным. Это создает «ожидающий переход состояния». (Подробнее см. здесь ). Вы должны явно передать новое входное значение как часть инициируемого события.

Ваш код должен быть:

import React, { useState } from 'react'

export default function () {
    const [select1, setSelect1] = useState("test")
    const [input1, setInput1] = useState("")
    const [input2, setInput2] = useState("")

    function select1Function(e) {
        setInput1(e.target.value)
        if (select1 === "test") {
            setInput2(e.target.value)
            document.getElementById("input2").disabled = true
        } else {
            document.getElementById("input2").disabled = false
        }
    }
    return (
        <div>

            <select value={select1} onChange={e => setSelect1(e.target.value)}>
                    <option value="test">Test</option>
                    <more options here (irrelevant to question)>
            </select>

            <input type="number" value={input1} onChange={select1Function}></input>
            <input type="number" value={input2} onChange={e => setInput2(e.target.value)} id="input2"></input>

        </div>
    )
}