javascript - using antd with redux-form

I'm trying to use ant.design react ponents with my redux-form, so far it goes something like this:

import { Form, Input } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;

.....

<FormItem>
  <Field
     ponent={Input}
     placeholder="First Name"
     name="name"
  />
</FormItem>

seems like antd form inputs don't support name attribute, they ignore and prevent to pass it down.

name attribute is needed for redux-form to be working.

does anyone had success to get these 2 working together? thank you.

I'm trying to use ant.design react ponents with my redux-form, so far it goes something like this:

import { Form, Input } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;

.....

<FormItem>
  <Field
     ponent={Input}
     placeholder="First Name"
     name="name"
  />
</FormItem>

seems like antd form inputs don't support name attribute, they ignore and prevent to pass it down.

name attribute is needed for redux-form to be working.

does anyone had success to get these 2 working together? thank you.

Share Improve this question edited Aug 23, 2017 at 17:43 Maxim Kuzmin 2,61421 silver badges24 bronze badges asked Aug 3, 2017 at 21:13 Pouya Sanooei 1,0223 gold badges13 silver badges22 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 11

In addition to Maxim answer, I had to pass redux-form props.input p to antd Input ponent.

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

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

<FormItem>
  <Input/>
</FormItem>

and pass this ponent into the Field.ponent. However, it does not sound cool, so you should consider using https://github./zhdmitry/redux-form-antd. This lib already have set of antd ponents wrapped in the Form.Item, so in your case it is just

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - using antd with redux-form - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)