支持多级绑定。

    参考：

    依赖

    1. yarn add immer lodash

    form-state.js

    1. import React from "react";
    2. import produce from "immer"
    3. import set from "lodash/set";
    4. import has from "lodash/has";
    6. // eslint-disable-next-line consistent-return
    7. const enhancedReducer = (state, updateArg) => {
    8.   // check if the type of update argument is a callback function
    9.   if (updateArg.constructor === Function) {
    10.     return {...state, ...updateArg(state)};
    11.   }
    13.   // if the type of update argument is an object
    14.   if (updateArg.constructor === Object) {
    15.     // does the update object have _path and _value as it's keys
    16.     // if yes then use them to update deep object values
    17.     if (has(updateArg, "_path") && has(updateArg, "_value")) {
    18.       const {_path, _value} = updateArg;
    20.       return produce(state, draft => {
    21.         set(draft, _path, _value);
    22.       });
    23.     }
    24.     return {...state, ...updateArg};
    25.   }
    26. };
    28. const useFormState = initialState => {
    29.   const [state, updateState] = React.useReducer(enhancedReducer, initialState);
    31.   const updateForm = React.useCallback(({target: {value, name, type}}) => {
    32.     const updatePath = name.split(".");
    34.     // if the input is a checkbox then use callback function to update
    35.     // the toggle state based on previous state
    36.     if (type === "checkbox") {
    37.       updateState(prevState => ({
    38.         [name]: !prevState[name]
    39.       }));
    41.       return;
    42.     }
    44.     // if we have to update the root level nodes in the form
    45.     if (updatePath.length === 1) {
    46.       const [key] = updatePath;
    48.       updateState({
    49.         [key]: value
    50.       });
    51.     }
    53.     // if we have to update nested nodes in the form object
    54.     // use _path and _value to update them.
    55.     if (updatePath.length === 2) {
    56.       updateState({
    57.         _path: updatePath,
    58.         _value: value
    59.       });
    60.     }
    61.   }, []);
    63.   return [state, updateState,updateForm];
    64. };
    66. export default useFormState;

    使用

    1. import useFormState from "./form-state";
    4.   const initialState = {
    5.     fname: "",
    6.     lname: "",
    7.     email: "",
    8.     message: ""
    9.   };
    11. const [state, updateState,updateForm] = useFormState(initState);
    13. state        表示表单
    14. updateState    用来手动更新state
    15. updateForm    自动双向绑定

    绑定示例：

    image.png