将 antd 与 redux-form 一起使用

Question

我正在尝试使用 ant.design reux 形式的反应组件，到目前为止它是这样的：

import { Form, Input } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;
.....
<FormItem>
<Field
component={Input}
placeholder="First Name"
name="name"
/>
</FormItem>

似乎antd表单输入不支持name属性，它们会忽略并阻止将其传递下来。

name属性是 redux-form 正常工作所必需的。

有没有人成功地让这两个人一起工作？谢谢。

Answer 1

除了 Maxim 答案之外，我还必须将 redux-formprops.inputcomp 传递给 antd 输入组件。

const NewInput = ({
label,
labelCol,
wrapperCol,
help,
extra,
validateStatus,
hasFeedback = true,
colon,
...rest
}) => {
return (<FormItem
label={label}
wrapperCol={wrapperCol}
labelCol={labelCol}
help={help}
hasFeedback={hasFeedback}
extra={extra}
validateStatus={validateStatus}
colon={colon}
>
<Input {...rest.input} />
</FormItem>);
};

Answer 2

一般来说，你不应该将 redux-formField组件包装在 antdForm.Item组件中。相反，您应该创建自己的组件：

<FormItem>
<Input/>
</FormItem>

并将此组件传递到Field.component中。 但是，这听起来并不酷，因此您应该考虑使用 https://github.com/zhdmitry/redux-form-antd。这个库已经有一组包装在Form.Item中的antd组件，所以在你的情况下，它只是

<Field name="name" component={TextField} />