问题描述
我制作了一个简单的表单验证自定义钩子，出于某种原因，它只适用于我页面中两个输入中的一个。
这是我定制的钩子。
export default function useForm(initialState) {
const [formValues,setFormValues] = useState(initialState);
const handleValue = (e) => {
const { name,value } = e.target;
setFormValues({
...formValues,[name]: {
...formValues[name],value: value,},});
console.dir(name,value,formValues);
};
const handleError = (ref,error) => {
const { name } = ref.current;
setFormValues({
...formValues,error: error,formValues);
};
return [formValues,handleValue,handleError];
}
调用钩子。
const [formValues,handleError] = useForm({
phone: { value: "",error: "" },password: { value: "",})
这是不起作用的输入。
<input
name="phone"
id="phone"
className="phone"
type="number"
placeholder="Mobile Number"
value={formValues.phone.value}
ref={inputPhoneRef}
onInput={handleValue}
onFocus={onFocus}
autoFocus
/>
这是有效工作的输入。
<input
name="password"
id="password"
className="password"
type="password"
placeholder="Password"
value={formValues.password.value}
ref={inputPasswordRef}
onInput={handleValue}
onFocus={onFocus}
/>
如果我尝试 console.log formValue 对象，则只有密码值会更新，如果出现错误，也只会更新密码错误。