kendo-react-ui 输入错误的 Redux 表单包装器
Redux Form wrapper for kendo-react-ui Input error
我正在使用 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)
但是在输入文本中键入时,它会不断给出以下内容 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().
在输入文本中键入时自动输出 [object Object]。请检查上图。谁能告诉我是什么导致了错误。
谢谢
reduxForm
仅适用于纯 DOM <input />
。在内部,它克隆元素搜索子项,然后动态附加 onChange
。因此它不适用于 Input
和 @progress/kendo-react-inputs
包中的 NumericTextBox
。此声明基于 official kendo documentation 关于与 redux-form 集成。
相同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.
我正在使用 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)
但是在输入文本中键入时,它会不断给出以下内容 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().
在输入文本中键入时自动输出 [object Object]。请检查上图。谁能告诉我是什么导致了错误。
谢谢
reduxForm
仅适用于纯 DOM <input />
。在内部,它克隆元素搜索子项,然后动态附加 onChange
。因此它不适用于 Input
和 @progress/kendo-react-inputs
包中的 NumericTextBox
。此声明基于 official kendo documentation 关于与 redux-form 集成。
相同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.