reactjs 如何在react-hook-form中自动将焦点设置为SlateJS编辑器

2vuwiymt  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(108)

我正在构建一个自定义的SlateJS编辑器,使用react-hook-form <Controller>组件。
这基本上是可行的,但有两件事(我怀疑是相关的)不可行:
1.通过react-hook-form initialFocus激活焦点,或从表单上下文钩子中设置焦点
1.通过表单挂钩reset()方法重置表单值
这是连接react-hook-form组件的控制器:

const CustomEditorController = () => {
    const { control } = useFormContext()

    return (
        <Controller
            name='editor'
            control={control}
            render={({ field }) => (
                <CustomEditor
                    ref={(el: any} => field.ref(el)}
                    name={field.name}
                    value={field.value}
                    onValueChange={field.onChange}
                />
            )}
        />
    )
}

字符串
自定义编辑器组件如下所示:

const CustomEditor = React.forwardRef<any, TextEditorProps>(
    (name, value, onValueChange }, ref) => {
        const editor: MyEditor = useMemo(() => (withHistory(withReact(createEditor()))), [])

        useImperativeHandle(ref, () => ({
            focus: () => {
                console.log("set focus via imperative handle");
                ReactEditor.focus(editor);
            },
        }));

        return (
            <Slate
                editor={editor}
                initialValue={value}
                onValueChange={onValueChange}
            >
                <Editable
                    name={name}
                />
            </Slate>
        )
    }
)


对于我与react-hook-forms集成的其他组件,如自定义文本输入,您可以使用此ref属性,这一切都很完美-它在正确的时间设置焦点,并在通过表单钩子调用reset()时重置输入值。
但是对于这个SlateJS编辑器,我不知道如何使用这个ref,或者如何将focus/reset调用从表单传播到编辑器。
我发现有一个ReactEditor.focus(editor) SlateJS API可以使用,但是在这个场景中如何使用它,以及reset()呢?

4urapxun

4urapxun1#

CustomEditor代码中,通过useImperativeHandle显式设置焦点是缺少的部分:

useImperativeHandle(ref, () => ({
  focus: () => {
    console.log("set focus via imperative handle");
    ReactEditor.focus(editor);
  },
}));

字符串
完全工作沙盒在这里https://codesandbox.io/p/sandbox/vigorous-gould-x3nwxg

相关问题