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

Question

我正在使用react，并试图使用if条件将一个输入的值更改为另一个输入。我遇到一个错误，输入值更改为以前的值，而不是当前值。示例：我在input1中输入1，input2保持为空。然后我在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的调用不是同步的。它创建了一个"挂起的状态转换"。您应该将新的输入值作为引发事件的一部分显式传递。

您的代码应该是：

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