时间戳

首页 > 解决方案 > 带有 Redux 表单的 Ant 设计

reactjs - 带有 Redux 表单的 Ant 设计

问题描述

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

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

我将不胜感激有关此问题的任何意见。谢谢！

标签： reactjsredux-formantd

解决方案

创建字段组件：

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
    }}
/>

推荐阅读