React-hook-form Demo之外—

control的应用

在react-hook-form的API中，有着control和useControl两个接口。官方文档描述的太过于简陋，以至于并不能帮你解决什么问题。

实际上，control被用于复杂表单下的这些场景，如果你有以下场景的需求，看下去：

自定义Input组件
子区域抽成组件

出现这样的需求往往是由于html的原生组件不能满足我们的需求，而一些组件库的风格又比较固定，不太好改成符合我们自己的界面风格。和实际业务场景中的表单十分复杂，为了达到结构简化和复用等目的，我们需要将其中子区域抽成一个组件，但是又要在一个form内受useForm的控制。

所以，当需要将关联在一起的input组合成一个组件，我们一般会这么写：

// 示例只含control的用法，未写useForm的相关用法，参照官方文档即可
// yourFomComponent.tsx
const { register, setValue, getValues, control } = useForm();

    


// yourComponent.tsx
export const ColorEditor = (props: UseControllerProps) => {
    const { field, fieldState } = useController(props);

    return (
        
            
            
        
    );
};

可以看到，在使用的时候control由useForm创建，useForm将一系列框架的方法和事件打包在其中用于作为参数传入。name,defaultVlue,control是UseControllerProps定义的参数，然后通过useController将control解包出来成了field，它与外部的register()的返回值一致。

但是，你说都抽成组件了，还是和外面的用法一样，control只是过了一道手而已，我想自己在中间加入我的控制怎么办。这个时候官方文档就不会告诉你怎么写，所以我们举个两个复杂例子：

场景一：自定义参数，不使用control的参数定义

// 示例只含control的用法，不含useForm的相关用法，参照官方文档即可

// yourFomComponent.tsx
const { register, setValue, getValues, control } = useForm();

    
    


// yourComponent.tsx
type Props = {
    id: string,
    name: string,
    text: string,
    defaultValue: boolean,
    control: Control
};
export const CheckBox = (props: Props) => {
    const { field } = useController({
        name: props.name,
        control: props.control
    });

    return (
        
            
            {props.text}
        
    );
};

场景二：自定义操作，不使用control的默认方法

// 示例只含control的用法，不含useForm的相关用法，参照官方文档即可

// yourFomComponent.tsx
const { register, setValue, getValues, control } = useForm();

    


// yourComponent.tsx
export const Number = (props: UseControllerProps) => {
    const { field, fieldState } = useController(props);
    const [editorValue, setEditorValue] = React.useState(props.defaultValue);
    const [mouseButton, setMouseButton] = React.useState(0);

    // 观察外部有没有使用 setValues()设置当前值 
    {
        const watchValue = useWatch({
            control: props.control,
            name: props.name,
            defaultValue: props.defaultValue
        });

        React.useEffect(() => {
            // 当观察值改变时，设置当前的编辑状态，触发重新渲染
            setEditorValue(watchValue);
        }, [watchValue]);
    }

    const handleMouseDownUp = (e: React.MouseEvent) => etMouseButton(e.buttons);
    const handleMouseLeave = (e: React.MouseEvent) => {
        if (e.buttons == 1)  setMouseButton(0);
    }
    const handleChange = (e: React.ChangeEvent) => {
        // 当值改变时重设状态值，保持input可编辑
        setEditorValue(e.target.value);

        if (mouseButton == 1) 
            field.onChange(e);
        else 
            e.stopPropagation(); // 阻止keyDown冒泡
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === "Enter")
            field.onChange(e);
    }

    return ;
};

这个例子就复杂很多，它是一个数字的编辑器，在输入后按回车和点击上下箭头调整数字时触发change事件。
要实现这个就解决三个问题，

1. 内部事件的拦截

拦截input的onChange事件，在其中判断用户时鼠标点击还是在键盘输入。同时，处理onKeyDown事件，在用户按下回车时，触发change。

2. 使控件可编辑

我们知道input控件实现值编辑就是通过onChange事件改变状态后重新render实现的，但是在这个场景下，我们拦截了onChange事件，这样input就处于不可编辑的状态。所以添加一个内部状态editorValue作为编辑值，在onChange事件中修改状态，保证input可编辑。

3. 使控件响应setValue()

当前编辑值改为内部状态后，我们就和form中的值失去了联系了。除了从defaultValue传入的初始值之外，外部setValue()当前name的时候，控件就不会有任何响应。我们通过useWatch来监视当前name来，当外部setValue时，我们收到消息，改变input控件的状态值。

React-hook-form Demo之外——实际的用法