我正在构建一个自定义的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()呢?
1条答案
按热度按时间4urapxun1#
在
CustomEditor
代码中,通过useImperativeHandle
显式设置焦点是缺少的部分:字符串
完全工作沙盒在这里https://codesandbox.io/p/sandbox/vigorous-gould-x3nwxg。