Question

我正在尝试使用我的redux-form使用ant.design react组件，到目前为止它是这样的：

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-form props.input comp传递给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

一般来说，您不应该在antd Field组件中包含redux-form Form.Item组件。相反，您应该创建自己的组件：

<FormItem>
  <Input/>
</FormItem>

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

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

使用具有还原形式的antd

2 个答案: