是否可以将 simple-react-code-editor 作为 Formik 字段组件？

如何解决是否可以将 simple-react-code-editor 作为 Formik 字段组件？

试图让这个表单域组件采用一个简单的反应代码编辑器：

不确定我是否通过尝试从 useField 钩子传递 props 来解决这个问题，但它适用于文本字段标签，因此认为相同的方法也适用于此。虽然，我觉得 onValueChange 回调与此组件没有的 onChange 回调不同。有没有办法以某种方式添加它？

编辑器组件：

const MyEditor = ({value,onChange}) => {

  const highlight = (value) => {
    return(
      <Highlight {...defaultProps} theme={theme} code={value} language="sql">
        {({ tokens,getLineProps,getTokenProps }) => (
          <>
            {tokens.map((line,i) => (
              <div {...getLineProps({ line,key: i })}>
                {line.map((token,key) => (
                  <span {...getTokenProps({ token,key })} />
                ))}
              </div>
            ))}
          </>
        )}
      </Highlight>
    )
  };

  return (
    <Editor
      value={value}
      onValueChange={onChange}
      highlight={highlight}
      padding={'40px'}
      style={styles.root}
    />
  );
}

export default MyEditor;

使用字段组件作为 MyEditor 的表单（尝试使用 useField 钩子）：

const FormQueryTextBox = ({...props}) => {

    const [field] = useField(props);

    return (
        <MyEditor onChange={field.onChange} value={field.value}/>
    )
}

const validationSchema = yup.object({
    query_name: yup
        .string()
        .required()
        .max(50)
});

const AddQueryForm = () => {
    return (
        <div>
            <Formik
                validateOnChange={true}
                initialValues={{
                    query:""
                }}
                validationSchema={validationSchema}
                onSubmit={(data,{ setSubmitting }) => {
                    console.log(data);
                }}
            >
                {() => (
                    <Form>
                        <div>
                            <Field
                                placeholder="query name"
                                name="query_name"
                                type="input"
                                as={TextField}
                            />
                        </div>
                        <div>
                            <Field
                                name="query"
                                type="input"
                                as={FormQueryTextBox}
                            />
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

组件呈现没有错误，但当我输入文本时没有出现。

解决方法

我发现我只需要使用 useFormikContext 钩子中的 setter 自定义我的 onChange，如下所示：

const FormQueryTextBox = ({...props}) => {

    const [field] = useField(props);
    const { setFieldValue } = useFormikContext();

    return (
        <MyEditor {...field} {...props} onChange={val => {
            setFieldValue(field.name,val)
        }}/>
    )
}