使用条件错误将输入值更改为另一个输入值

Question

我正在使用react，并且我尝试使用if条件将一个输入的值更改为另一个输入。我在输入值更改为前一个值而不是当前值时遇到错误。示例：我在输入1中输入1，而输入2保持空白。然后，我在input1上添加一个0，使其值为10，然后第二个输入将其值更改为1。然后从输入1删除0，使该值再次为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的调用不同步。它创建一个“待处理状态转换”。 （有关更多详细信息，请参见here）。您应该在引发事件的过程中显式传递新的输入值。

您的代码应为：

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>
    )
}