如何解决React 表单处理无法获取输入值
我制作了一个简单的表单验证自定义钩子,出于某种原因,它只适用于我页面中两个输入中的一个。
这是我定制的钩子。
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
对象,则只有密码值会更新,如果出现错误,也只会更新密码错误。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。