我有一个项目,我使用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 ?????
答案 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>