Контроллер react-hook-form с помощью react-draft-wysiwyg

Мне нужна помощь. В своем проекте я использовал response-final-form, но решил изменить на react-hook-form. Кстати, мне это нравится, но я застрял. : /

На своей странице я использую редактор для сбора информации от пользователя. На данный момент я использую response-draft-wysiwyg. Вот код:

parentComponent.js

/**
 * react-hook-form library
*/
const {
    register,
    handleSubmit,
    control
} = useForm({
    mode: 'onChange'
});

<form onSubmit={handleSubmit(onSubmit)}>
    <Controller
        as={<WYSIWYGEditor />}
        name='editor'
        control={control}
        onChange={([ event ]) => event.target.value}
    />
</form>

WYSIWYGEditor.js

const WYSIWYGEditor = ({ input }) => {
    const [ editorState, setEditorState ] = useState(EditorState.createEmpty());
    const onEditorStateChange = editorState => {
        setEditorState(editorState);
    };

    return (
        <React.Fragment>
            <div className={classes.root}>
                <Editor
                    editorState={editorState}
                    wrapperClassName='wrapper-class'
                    editorClassName='editor-class'
                    onEditorStateChange={onEditorStateChange}
                />
            </div>
        </React.Fragment>
    );
};

export default WYSIWYGEditor;

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: свойство input получено из кодирования с помощью response-final-form. На входе передавались символы, которые я набирал. Итак, если я оставлю input в качестве реквизита, он потерпит неудачу, потому что его не существует. React-hook-form не передает ввод. Я изменил это с помощью props:

const WYSIWYGEditor = props=> {
    console.log(props)

и я получаю следующее в console.log, когда что-либо печатаю:

{name: "editor", value: undefined, onChange: ƒ}

Как видите, значение равно undefined. Как я могу структурировать Controller, чтобы передавать значение каждый раз, когда я что-то печатаю в редакторе?

Спасибо за вашу помощь


reactjs react-hook-form react-draft-wysiwyg
person Joe    schedule 03.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение.

value не определено, потому что, очевидно, при загрузке компонента загружать нечего. Если вы не хотите видеть undefined, просто передайте defaultValue='' от контроллера:

<Controller
  as={<WYSIWYGEditor />}
  name='editor'
  control={control}
  onChange={([ event ]) => event.target.value}
  defaultValue='' <== here
/>

Теперь проблема, которая не позволяет вернуть какое-либо типизированное значение, заключается в том, что я объявил onChange из контроллера. Итак, правильный код будет:

<Controller
  as={<WYSIWYGEditor />}
  name='editor'
  control={control}
  defaultValue=''
/>

Кроме того, в файле WYSIWYGEditor.js вам нужно заменить то, что раньше было input на props. Причина в том, что они передают точно такой же объект, который содержит функции value, onChange и onBlur.

Вот песочница с рабочим кодом: https://codesandbox.io/s/trusting-mountain-k24ys?file=/src/App.js

person Joe    schedule 08.06.2020