React Custom hook 踩坑日记 - form hook

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

// 使用useState来记录表单栏位讯息
const [nativeForm, setNativeForm] = useState({
  user: '',
  pwd: ''
})
// 定义onChange function
const 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.js
import { 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里面做修改：

// 改为引入刚刚做好的useForm
const [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>

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