用于kendo-react-ui输入错误的Redux表单包装器

Question

I am using react-kendo-ui. I want to wrap Input from @progress/kendo-react-inputs to use it with ReduxForm. Please find my code below:

import React from 'react'
import { Input } from '@progress/kendo-react-inputs';

const InputText = ({ input, label, type, meta: { touched, error } }) => (
    <div>
        <label>{label}</label>
        <div>
            <Input {...input} type={type} placeholder={label} />
            {touched && error && <span>{error}</span>}
        </div>
    </div>
)

export default InputText

Call the InputText from another component as below:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Input } from '@progress/kendo-react-inputs';
import InputText from './input-text';

const validateNotEmpty = value => !value ? 'Must enter a value' : null;

const onSubmit = (values) => {
    console.log(values);
}

const AddLoc= ({ handleSubmit }) => (
    <form onSubmit={handleSubmit}>
        <div>
            <Field
                label="Address"
                name="address"
                component={InputText}
                validate={validateNotEmpty}
            />
        </div>
        <button type="submit">Submit</button>
    </form>
)

export default reduxForm({
    form: 'AddLoc'
})(AddLoc)

But while typing inside the input text it keeps giving the following error/warning:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

While typing inside the input text automatically outputs [object Object] . Please check the image above. Could anyone please let me know what is causing the error.

Thanks

Answer 1

The reduxForm works only with pure DOM <input /> . Internally it clones the elements search the children and then attaches the onChange dynamically. So it will not work with the Input and the NumericTextBox from the @progress/kendo-react-inputs package. This statement is based on the official kendo documentation about integrating with the redux-form.

The same author of the redux-form have fork of it called react-final-form which could be used on any component that have Value and onChange props. By our tests it works with the components from @progress/kendo-react-inputs and @progress/kendo-react-dropdowns packages. It looks kendo already have an example using final-form in their integration section .