[英]useState() hook not updating the value on change
小上下文,我正在尝试创建一个用于获取用户注册的表单。
我首先编写了如下代码。
import { useState } from 'react';
const SignupComponent = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
error: '',
loading: false,
message: '',
showForm: true
})
const { name, email, password, error, loading, showForm } = formData;
const onChange = e => {
setFormData({ ...formData, error: false, [e.target.name]: e.target.value })
console.log(name)
}
const handleSubmit = async e => {
e.preventDefault();
console.table({ name, email, password, error, loading, showForm })
}
const signupForm = () => {
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<input type="text" className="form-control" placeholder="Enter Your Name" values={name} onChange={e => onChange(e)} />
</div>
<div className="form-group">
<input values={email} onChange={e => onChange(e)} type="email" className="form-control" placeholder="Enter Your Email" />
</div>
<div className="form-group">
<input values={password} onChange={e => onChange(e)} type="password" className="form-control" placeholder="Enter Your Password" />
</div>
<div>
<button className="btn btn-primary">Signup</button>
</div>
</form>
);
};
return <React.Fragment>{signupForm()}</React.Fragment>};
export default SignupComponent;
我注意到在这个代码片段中,setFormData 中的状态没有得到更新,控制台日志名称或任何其他值返回一个空字符串。
但是在这样调整代码之后
import { useState } from 'react';
const SignupComponent = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
error: '',
loading: false,
message: '',
showForm: true
})
const { name, email, password, error, loading, showForm } = formData;
const handleChange = value => (e) => {
setFormData({ ...formData, error: false, [value]: e.target.value })
console.log(name)
}
const handleSubmit = async e => {
e.preventDefault();
console.table({ name, email, password, error, loading, showForm })
}
const signupForm = () => {
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<input type="text" className="form-control" placeholder="Enter Your Name" values={name} onChange={handleChange('name')} />
</div>
<div className="form-group">
<input values={email} onChange={handleChange('email')} type="email" className="form-control" placeholder="Enter Your Email" />
</div>
<div className="form-group">
<input values={password} onChange={handleChange('password')} type="password" className="form-control" placeholder="Enter Your Password" />
</div>
<div>
<button className="btn btn-primary">Signup</button>
</div>
</form>
);
};
return <React.Fragment>{signupForm()}</React.Fragment> };
export default SignupComponent;
使代码工作,结果如预期。 就像这张图片一样。 第二种方式
为什么会有这样的行为。 为什么第一种方法不起作用。
您忘记了输入中的 name 属性,以及没有 s 的 value 属性
<input name="email" value={email} onChange={onChange} ... />
然后
const onChange = e => {
// The event will get passed as an argument even if you don't bind it in onChange={onChange}.
console.log(e.target.name, e.target.value)
setFormData({ ...formData, error: false, [e.target.name]: e.target.value })
}
该事件将作为参数传递。
它适用于您将名称作为参数传递的第二个原因
见文档, https://reactjs.org/docs/thinking-in-react.html
React 的单向数据流(也称为单向绑定)使一切保持模块化和快速。
重要的事情来解决你的问题。
signupForm
渲染函数是在 FC 中声明的。 第一的。 将signupForm
渲染功能更改为 FC 组件。
其次,将 props 传递给组件。 第三,重复使用它们。
import React from 'react'; // React is required to render JSX const FormInput = ({ type, placeholder, value, onChange, }) => ( <div className="form-group"> <input type={type} className="form-control" placeholder={placeholder} value={value} onChange={onChange} /> </div> ); const SignupComponent = () => { const [formData, setFormData] = React.useState({ name: '', email: '', password: '', error: false, loading: false, message: '', showForm: true, }); const { name, email, password, error, loading, showForm, } = formData; const handleChange = (value) => (e) => { setFormData({ ...formData, error: false, [value]: e.target.value, }); console.log(name); }; const handleSubmit = async (e) => { e.preventDefault(); console.table({ name, email, password, error, loading, showForm, }); }; return ( <form onSubmit={handleSubmit}> <FormInput type="text" value={name} placeholder="Enter Your Name" onChange={handleChange('name')} /> <div> <button type="submit" className="btn btn-primary">Signup</button> </div> </form> ); }; export default SignupComponent;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.