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