Обертка Redux Form для ошибки ввода kendo-react-ui

Я использую react-kendo-ui. Я хочу обернуть ввод из @ progress / kendo-response-inputs, чтобы использовать его с ReduxForm. Пожалуйста, найдите мой код ниже:

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

Вызовите InputText из другого компонента, как показано ниже:

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)

Но при вводе внутри вводимого текста он продолжает выдавать следующую ошибку / предупреждение:

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().

введите здесь описание изображения

При вводе внутри вводимый текст автоматически выводит [объект Object]. Пожалуйста, проверьте изображение выше. Может ли кто-нибудь сообщить мне, что вызывает ошибку.

Спасибо


person Ashy Ashcsi    schedule 03.05.2018    source источник


Ответы (1)


reduxForm работает только с чистым DOM <input />. Внутренне он клонирует элементы для поиска дочерних элементов, а затем динамически присоединяет onChange. Таким образом, он не будет работать с Input и NumericTextBox из пакета @progress/kendo-react-inputs. Это заявление основано на официальной документации по кендо. об интеграции с redux-form.

Тот же автор redux-form назвал его вилку react-final-form, который можно использовать в любом компоненте, имеющем Value и onChange свойства. По нашим тестам, он работает с компонентами из пакетов @progress/kendo-react-inputs и @progress/kendo-react-dropdowns. Похоже, у кендо уже есть пример использования final-form в их раздел интеграции.

person Xizario    schedule 16.05.2018