0

我正在使用 react-kendo-ui。我想包装来自@progress/kendo-react-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 Object]。请检查上面的图片。任何人都可以让我知道导致错误的原因。

谢谢

4

1 回答 1

0

仅适用于reduxForm纯 DOM <input />。在内部，它克隆元素搜索子元素，然后onChange动态附加。所以它不适用于包中的 the和Inputthe 。此声明基于有关与 redux-form 集成的官方 kendo 文档。NumericTextBox@progress/kendo-react-inputs

它的has fork的同一作者称为react-final-form，可用于任何具有和props 的组件。通过我们的测试，它可以与来自和包的组件一起使用。看起来 kendo在他们的集成部分中已经有一个使用示例。redux-formValueonChange@progress/kendo-react-inputs@progress/kendo-react-dropdownsfinal-form

于 2018-05-16T15:33:26.447 回答