代码之家 › 专栏 › 技术社区 › Pouya Sanooei

将antd与redux表单一起使用

antd redux-form redux reactjs javascript

Pouya Sanooei · 技术社区 · 7 年前

我正在尝试使用ant。用我的redux表单设计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

有没有人成功地让这两个人一起工作?非常感谢。

2 回复 | 直到 7 年前

Pouya Sanooei 7 年前

除了Maxim answer,我还必须通过redux表单 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>);
};

Maxim Kuzmin 7 年前

一般来说,您不应该包装redux表单 Field antd中的组件 Form.Item 组成部分相反,您应该创建自己的组件:

<FormItem>
  <Input/>
</FormItem>

Field.component 但是,它听起来并不酷,因此您应该考虑使用 https://github.com/zhdmitry/redux-form-antd 。此库中已包装了一组antd组件

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

推荐文章

Franva · 如何使用Webpack 3配置Ant设计

7 年前

enzeberg · 在Ant Design中,如何将图标垂直居中?

7 年前

Emo · 导入Ant设计组件无效

7 年前

ThePainnn · 由第三方(antd)样式覆盖的样式化组件

7 年前

Michael Fernandes · 垂直菜单蚂蚁设计高度100%

7 年前

Thijs Koerselman · 如何包装组件并继承其props接口

7 年前

willywonka15 · 如何禁用react中的子菜单项?

7 年前

Thijs Koerselman · Ant Design antd与antd mobile用于非本地移动web开发

7 年前

Yichz · 包装Antd组件

7 年前

Avery235 · rc时间选择器在移动设备上未正确显示

7 年前