React Custom hook 踩坑日记 - form hook

今天分享一个简单又常用到的方法来处理表单，先举个新手进入React处理表单时常用到的例子：

// 使用useState来记录表单栏位讯息const [nativeForm, setNativeForm] = useState({  user: '',  pwd: ''})// 定义onChange functionconst nativeFormChange = e => setNativeForm({...nativeForm, [e.target.name]: e.target.value })

<!-- in return --><fieldset>  <legend>一般的useState</legend>  <div>    <label htmlFor="user">用户名</label>    <input       id="user"      name="user"      value={nativeForm.user}      onChange={nativeFormChange}    />  </div>  <div>    <label htmlFor="pwd">密码</label>    <input       id="pwd"      name="pwd"      type="password"      value={nativeForm.pwd}      onChange={nativeFormChange}    />  </div></fieldset>

按照上次讲的逻辑来做简化，所以一步一步来，现创一个新的.js，档案来整理这边的useState和onChange function：

// useForm.jsimport { useState } from "react"const useForm = (defaultValues) => {  // 先另立一个form state 的 object  const [state, setState] = useState(defaultValues || {});  // 基础的塞入方法，当input form 的 name 有对应到的时候就可改变该状态  const handleChange = e => {    setState(state => ({ ...state, [e.target.name]: e.target.value }));  }  // 回传form state && handleChange function  return [state, handleChange];}export default useForm;

接着，回到原本的component里面做修改：

// 改为引入刚刚做好的useFormconst [nativeForm, nativeFormChange] = useForm({  user: '',  pwd: ''})

稍微修改一下新的function命名

<!-- in return --><fieldset>  <legend>custom hook useForm</legend>  <div>    <label htmlFor="user">用户名</label>    <input       id="user"      name="user"      value={nativeForm.user}      onChange={nativeFormChange}    />  </div>  <div>    <label htmlFor="pwd">密码</label>    <input       id="pwd"      name="pwd"      type="password"      value={nativeForm.pwd}      onChange={nativeFormChange}    />  </div></fieldset>

以上就是一个简单的应用分享，开发没有绝对的事情，但多了解不同的作法与认知不同做法之间的优缺点，才是真正重要的事情，拿着自己的主观意见绑架他人的想法时，格局小了，眼界也小了，哪还来的了进步的空间。希望我的作法能够帮助到大家，之后也会分享更多我已知的作法。