如何解决第二次进入后的 onChange 效果
我对 ReactJS 有点陌生,我的 onChange
函数有问题,它在第二次输入后开始显示,并且每次都晚一个字母。我显然不明白为什么
这是我的代码:
const [values,setValues] = useState({
latinName: "",wingLength: "",weight: "",adiposity: "",age: "",howCaptured: "",whenCaptured: "",whereCaptured: "",ringNumber: "",takeover: "",});
const handleChange = (e) => {
const { name,value } = e.target;
setValues({
...values,[name]: value,});
console.log(values);
}
<input type="text" name="latinName" id="latinName" onChange={handleChange} value={values.latinName} />
解决方法
useState
钩子的 setState
工作 async
。因此,在状态更新期间,您仍会同时获得先前的值。
您可以在您的情况下使用 useEffect
钩子。
useEffect(() => console.log(values),[values]);
完整代码:
import { useEffect,useState } from "react";
export default function App() {
const [values,setValues] = useState({
latinName: "",wingLength: "",weight: "",adiposity: "",age: "",howCaptured: "",whenCaptured: "",whereCaptured: "",ringNumber: "",takeover: ""
});
useEffect(() => console.log(values),[values]);
const handleChange = (e) => {
const { name,value } = e.target;
setValues({
...values,[name]: value
});
};
return (
<input
type="text"
name="latinName"
id="latinName"
onChange={handleChange}
value={values.latinName}
/>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。