如何从html输入更新默认的useSate值?

Question

这是一个简单的问题。我有一个React useState钩子，

const [seconds, setSeconds] = useState(0);

我如何能够将useState默认值0更新为我输入的任何数字，从某种文本框或HTML输入?

提前感谢。

Answer 1

您需要在输入中添加一个更改事件，然后添加处理输入更改的函数。例如:

export default function App() {
const [seconds, setSecond]= useState(0);
const handleSeondChange = (event)=>{
setSecond(event.currentTarget.value);
}
return (
<div className="App">
<input name ="seconds" value={seconds} onChange={handleSecondChange}/>
</div>
);
}

Answer 2

在输入标签中包含一个onChange处理程序。例如"<input onChange={(event) => setSeconds(event.target.value)} value={seconds}/>"。这里处理的是受控输入，因此请确保在输入中包含value标签，就像我上面所包含的那样。