是否可以在formik中使用react-codemirror2?

时间:2019-04-05 15:02:14

标签: javascript reactjs formik react-codemirror

我有一个项目,我使用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没有事件...

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

<CodeMirror
    onChange=form.handleChange

或使用:

<CodeMirror
     onKeyUp={form.handleChange}

或:

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

但没有任何效果 我的功能handleChange永远不会调用 如何在Formik中使用react-codeMirror2?有可能吗我怎么能接受Formink的onChange ?????

1 个答案:

答案 0 :(得分:0)

Formik的handleChange方法需要一个HTMLInput更改事件,并从输入中获取更新的值。不幸的是,如果您使用CodeMirror,则无法获得便利。但是,CodeMirror提供了组件onBeforeChange的值,而Formik提供了setFieldValue方法,该方法使您可以强制将值设置为state。因此,您可以这样做:

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