Оболочка Redux Form для kendo-реагировать на ошибки ввода - PullRequest
Новая
       23

Оболочка Redux Form для kendo-реагировать на ошибки ввода

0 голосов
/ 03 мая 2018

Я использую реагировать-кендо-ии Я хочу обернуть Input из @ progress / kendo-реагирующий ввод, чтобы использовать его с 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().

enter image description here

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

Спасибо

1 Ответ

0 голосов
/ 16 мая 2018

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

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

...