Using antd with reduction

Question

I am trying to use ant.design components with my reduction form, so far it looks something like this:

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>

it looks like the form input antddoes not support the attribute name, they ignore it and prevent it from being passed.

Attribute

name necessary for the operation of the reduction form.

Has anyone been successful to get these 2 to work together? thank.

Answer 1

Generally speaking, you should not wrap the redux-form Fieldcomponent in an antd component Form.Item. Instead, you should create your own component:

<FormItem>
  <Input/>
</FormItem>

Field.component. , https://github.com/zhdmitry/redux-form-antd. lib antd, Form.Item,

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

Answer 2

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