Redux表单的Ant设计

Question

Hi I need to use Ant Design component with Redux Form. I am aware of this library ( https://github.com/zhDmitry/redux-form-antd ) but I need to use Cascader component which is not included in redux-form-antd.

Everytime I try to pass it to Field.component I get a type error (not assignable types). I suppose I need to somehow wrap Cascader component to make this work but I am not sure how.

I would appreciate any input on this issue. Thanks!

Answer 1

Create field component:

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

And in form:

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