Question

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

每次我尝试将其传递给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
    }}
/>

Redux表单的Ant设计

1 个答案: