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

Question

我正在使用 React，我正在尝试使用 if 条件将一个输入的值更改为另一个输入。我遇到一个错误，输入值更改为以前的值而不是当前值。示例：我在 input1 中输入 1，而 input2 保持空白。然后我将 0 添加到 input1 使值 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 的调用不是同步的。它会创建一个 "pending state transition."（有关详细信息，请参阅 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>
    )
}

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

React changing input value to another input value using if condition error

javascript

reactjs

jsx

react-state