如何解决无法在 React 状态中重置值
export default function Register() {
const [formData,setformData] = useState({
name: "",emailid: "",password: "",password2: "",});
const [formHelperText,setFormHelperText] = useState({
formHelperTextname: "",formHelperTextemailid: "",formHelperTextpassword: "",formHelperTextpassword2: "",});
const { name,emailid,password,password2 } = formData;
const {
formHelperTextname,formHelperTextemailid,formHelperTextpassword,formHelperTextpassword2,} = formHelperText;
const onChange = (e) => {
setformData({ ...formData,[e.target.name]: e.target.value });
};
let onSubmit = (e) => {
e.preventDefault();
debugger;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
setFormHelperText({
...formHelperText,formHelperTextname: "",});
if (name.length === 0) {
setFormHelperText({
...formHelperText,formHelperTextname: "Enter your name",});
}
else if (emailid.length === 0) {
setFormHelperText({
...formHelperText,formHelperTextemailid: "Enter your email",});
} else if (!emailid.match(mailformat)) {
setFormHelperText({
...formHelperText,formHelperTextemailid: "Enter valid email",});
}
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate onSubmit={onSubmit}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="name"
label="Name"
name="name"
value={name}
onChange={onChange}
autoFocus
error={formHelperTextname.length > 0}
helperText={formHelperTextname}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="emailid"
value={emailid}
onChange={onChange}
autoComplete="email"
error={formHelperTextemailid.length > 0}
helperText={formHelperTextemailid}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
value={password}
onChange={onChange}
error={formHelperTextpassword.length > 0}
helperText={formHelperTextpassword}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password2"
label="Retype Password"
type="password"
id="password2"
value={password2}
onChange={onChange}
error={formHelperTextpassword2.length > 0}
helperText={formHelperTextpassword2}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container>
<Grid item xs></Grid>
<Grid item>
<Link href="/" variant="body2">
{"Already have an account? Sign In"}
</Link>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
当我尝试重置 formHelperTextname onSubmit 函数的值时。该值未更新为空字符串。
当我尝试重置 formhelperText 它不起作用
当我尝试重置 formHelperTextname onSubmit 函数的值时。该值未更新为空字符串。
当我尝试重置 formhelperText 它不起作用
解决方法
状态改变后不能立即分配。有必要听状态并做同样的事情。 您可以在下面查看修改后的代码。 我希望我有所帮助。
const [isClear,setIsClear] = useState(false);
useEffect(() => {
if (isClear) {
setFormHelperText({
...formHelperText,formHelperTextname: "",formHelperTextemailid: "",});
}
},[isClear]);
let onSubmit = (e) => {
e.preventDefault();
debugger;
var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
setIsClear(true);
if (name.length === 0) {
setFormHelperText({
...formHelperText,formHelperTextname: "Enter your name",});
}
else if (emailid.length === 0) {
setFormHelperText({
...formHelperText,formHelperTextemailid: "Enter your email",});
} else if (!emailid.match(mailformat)) {
setFormHelperText({
...formHelperText,formHelperTextemailid: "Enter valid email",});
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。