是否可以将 react-codemirror2 与 formik 一起使用？答案

【问题标题】：Is it possible use react-codemirror2 with formik?是否可以将 react-codemirror2 与 formik 一起使用？
【发布时间】：2019-08-27 12:46:12
【问题描述】：

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

<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在哪里：

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 它可以工作，我不需要在我的 CustomInputComponent 上调用 onChange ，即由 formink 直接调用...因为 textField 的 onChange 也有作为参数事件.. . 但正如您在代码中看到的那样，codeMirror 的 onChange 没有事件...

我需要调用我的 handleChange 而不是 codeMirror 的 onChange ... 我试图做这样的事情：

<CodeMirror
    onChange=form.handleChange

或使用：

<CodeMirror
     onKeyUp={form.handleChange}

或：

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

但没有任何效果我的函数 handleChange 永远不会调用如何将 react-codeMirror2 与 Formik 一起使用？有可能吗？ Formink 的 onChange 怎么接收？？？？？？

【问题讨论】：

标签： javascript reactjs formik react-codemirror

【解决方案1】：

Formik 的handleChange 方法需要一个HTMLInput 更改事件，它会从输入中获取更新后的值。不幸的是，如果您使用 CodeMirror，您将无法获得这种便利。但是，CodeMirror 提供了组件 onBeforeChange 的值，Formik 提供了一个setFieldValue 方法，它让您可以命令式地将值设置为状态。所以你可以这样做：

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

【讨论】：