如何从 html 输入更新默认 useState 值？答案

【问题标题】：How do I update the default useSate value from a html input?如何从 html 输入更新默认 useState 值？
【发布时间】：2023-03-15 12:50:01
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

标签： javascript reactjs react-hooks default-value

【解决方案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>
 );
}

【讨论】：

【解决方案2】：

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

【讨论】：