Ant Design 与 Redux 表单

Question

您好，我需要将 Ant Design 组件与 Redux Form 一起使用。我知道这个库 (https://github.com/zhDmitry/redux-form-antd) 但我需要使用 Cascader 组件，它不包含在 redux-form-antd 中。

每次我尝试将它传递给 Field.component 时，我都会收到类型错误（不可分配的类型）。我想我需要以某种方式包装 Cascader 组件以使其工作，但我不确定如何。

如果您对此问题有任何意见，我将不胜感激。谢谢！

Answer 1

创建字段组件：

import * as React from 'react';
import { WrappedFieldProps } from 'redux-form';
import Cascader, { CascaderProps } from 'antd/lib/cascader';

interface RenderCascaderFieldProps extends WrappedFieldProps {
    readonly cascaderProps: CascaderProps;
}

export function renderCascader(props: RenderCascaderFieldProps) {
    const { input, cascaderProps } = props;
    return (
        <Cascader
            value={input.value ? input.value : undefined}
            onChange={input.onChange}
            {...cascaderProps}
        />
    );
}

形式为：

<Field
    name={fieldName}
    component={renderCascader}
    cascaderProps={{
        placeholder: 'Select city',
        loadData: this.loadData,
        options: options
    }}
/>

Ant Design 与 Redux 表单

Ant Design with Redux Form

reactjs

redux-form

antd