如何解决自定义钩子以简化反应控制形式
我想简化表单创建,避免使用自定义钩子为每个字段 value={}
和 onChange={}
编写代码。
这是我的代码: https://codesandbox.io/s/busy-noether-pql8x?file=/src/App.js
问题是,每次我按下按钮时,除了我当前编辑的字段外,状态都会被清除
解决方法
import React,{ useState } from "react";
import "./styles.css";
const useFormField = (initialValue) => {
const [values,setValues] = React.useState(initialValue);
const onChange = React.useCallback((e) => {
const name = e.target.name;
const value = e.target.value;
setValues( (prevValues) => ({...prevValues,[name]:value}));
},[]);
return { values,onChange };
};
export default function App() {
//hoot to simplify the code,const {values,onChange} = useFormField({
Salary: "",Email: ""
})
const onCreateUser = () => {
console.log(values);
};
return (
<div className="App">
<form>
<label htmlFor="Email">Email: </label>
<input name="Email" onChange={onChange} />
<label htmlFor="Email">Salary: </label>
<input name="Salary" onChange={onChange} />
<button type="button" onClick={onCreateUser}>
Send
</button>
</form>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。