问题描述
import React,{ useState,useMemo,useCallback,useEffect } from "react";
const Register = () => {
const [form,setForm] = useState({
fName: "",lName: "",email: "",password: "",country: "",});
const [errors,setError] = useState({});
const [contact,setContact] = useState();
const schema = {
fName: Joi.string().min(10).required().label("First Name"),lName: Joi.string().min(10).required().label("Last Name"),email: Joi.string().min(10).required().label("Email"),password: Joi.string().min(10).required().label("Password"),country: Joi.string().required().label("Country"),};
const handleContact = useCallback((contact) => {
setContact(contact);
},[]);
const handleSubmit = (e) => {
e.preventDefault();
};
const handleChange = ({ target: input }) => {
const { name } = input;
const errors = validation(input,schema);
const newFormState = { ...form };
newFormState[name] = input.value;
setForm(newFormState);
setError(errors);
};
return (
<form onSubmit={handleSubmit}>
{console.log("Rendered")}
<Input
fullWidth={true}
variant="outlined"
id="fName"
name="fName"
label="First Name"
value={form.fName}
onChange={handleChange}
error={errors ? errors.fName : null}
/>
<Input
fullWidth={true}
variant="outlined"
id="lName"
name="lName"
label="Last Name"
value={form.lName}
onChange={handleChange}
error={errors ? errors.lName : null}
/>
<Input
fullWidth={true}
variant="outlined"
id="email"
name="email"
label="Email"
value={form.email}
onChange={handleChange}
error={errors ? errors.email : null}
/>
<Input
fullWidth={true}
placeholder="Password"
variant="outlined"
id="password"
name="password"
type="password"
label="Password"
value={form.password}
onChange={handleChange}
error={errors ? errors.password : null}
/>
<DropDown
fullWidth={true}
name="country"
label="Country"
options={["Pakistan","India","USA"]}
onChange={handleChange}
/>
<PhoneInputField onChange={handleContact} />
<ButtonComponent
color="primary"
disabled={validate(form,schema)}
variant="contained"
>
Register
</ButtonComponent>
</form>
);
};
export default Register;
如何停止重新提交整个表格?输入是一个自定义组件,作为导出默认的备忘录(输入)包装在备忘录中。现在,如果我开始在电子邮件输入字段中输入内容,其他2个也会重新呈现。这是因为在每次更新时,handleChange的引用都会更新,这会导致重新呈现输入字段。我已经尝试将handleChange包装在useCallBack中,但是没有运气,因为表单状态是它的依赖关系,并且每次更改时,handleChange的引用最终都会被更新。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)