是否可以将 react-codemirror2 与 formik 一起使用?

Question

我有一个项目，我使用 Formik 和 react-codemirror2，我想控制 Formik 中的 onChange 但 codemirror2 中的 onChange 没有事件...而且我不知道如何使用... 让我更好地解释： 我有一个公式：

<Formik
enableReinitialize
onSubmit={values => 
{this.submitFormDefinition(values)}}
initialValues={this.state}
>
{({ handleSubmit }) => (
<div>
<Form
onSubmit={handleSubmit}
autoComplete="off"
onChange={event => {
this.handleChange(event)
}}
>
<Field
component={CustomInputComponent}
name="name"
id="id"
multiline
/>
</Form>
</div>
)}

我在哪里有我的函数句柄更改：

handleChange = event => {console.log('change') ....}

其中 CustomInputComponent 是我的 codemirror2 组件：

const CustomInputComponent = ({ field, form, ...props }) => {
return (
<CodeMirror
id={props.id}
name={props.name}
value={this.state.value}
options={{
mode: 'javascript',
theme: 'default',
lineNumbers: true,
}}
{...props}
onBeforeChange={(editor, data, value) => {
console.log({ value })
this.setState({ jsonSchema: value })
}}
onChange={(editor, data, value) => {
?????????????
}}
/>
)
}

如果我使用另一个组件作为 Materia-UI 中的 textField，它可以工作，我不需要在我的自定义输入组件上调用 onChange ，即通过 formink 直接调用...因为文本字段的onChange也有作为参数事件...但正如您在代码中看到的那样，代码镜像的 onChange 没有事件......

我需要调用我的句柄更改而不是更改代码镜像... 我试图做这样的事情：

<CodeMirror
onChange=form.handleChange

或使用 ：

<CodeMirror
onKeyUp={form.handleChange}

或：

<CodeMirror
onKeyUp={(editor, event) => {
form.handleChange(event)
}}

但没有任何效果 我的函数句柄更改从不调用 如何将 react-codeMirror2 与 Formik 一起使用？可能吗？我怎样才能迭代 Formink 的更改?????

Answer 1

Formik 的handleChange方法需要一个 HTMLInput 更改事件，它从输入中获取更新的值。不幸的是，如果您使用的是CodeMirror，您将无法获得这种便利。但是，CodeMirror 在 BeforeChange 上提供了组件的值，而 Formik 提供了一个setFieldValue方法，该方法允许您强制将值设置为 state。所以你可以这样做：

<Formik {...whateverPropsYouSet}>
(formikProps) => (
<CodeMirror
value={formikProps.values.yourDataField}
onBeforeChange={(_editor, _data, value) => {
formikProps.setFieldValue('yourDataField', value);
}
/>
)
</Formik>