将 antd 与 redux-form 结合使用

Question

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

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

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

<FormItem>
  <Input/>
</FormItem>

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

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

Answer 2

除了 Maxim 的回答，我不得不将 redux-form props.input comp 传递给 antd Input 组件。

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>);
};

将 antd 与 redux-form 结合使用

using antd with redux-form

javascript

reactjs

redux

redux-form

antd