Пользовательская кнопка в Reaction-Admin

Question

Я хочу создать кнопку «клонировать» из react-admin, которая позволит мне клонировать / скопировать существующую запись данных в другую и откроет форму редактирования для их редактирования и создания новой записи.Как я могу это сделать?

PS Я использую Typescript

В настоящее время мой код выглядит так:

<Datagrid rowStyle={modelRowStyle}> 
   <TextField source="format" /> 
   <TextField source="status" /> 
   <EditButton basePath="/models" /> 
   <DeleteButton basePath="/models" /> 
   <CloneButton /> 
</Datagrid> 

Какой должна быть функция кнопки клона, если она будет выглядетьизменить (потому что он будет принимать предыдущие значения) или как создать (потому что я хочу создать новый)

Создать компонент выглядит так `

export const ModelCreate = (props: object) => (
    <Create title="Create a Model" {...props}>
        <SimpleForm toolbar={<ModelCreateToolbar />}>
            <TextInput source="name" label="Name" autoWidth={true} /> 
            <TextInput source="version" label="Version" />
            <SelectInput source="format" label="Format" choices={Format} optionText="name" optionValue="format" />
            <SelectInput source="group" label="Group" choices={Group} optionText="name" optionValue="group" /> 
        </SimpleForm>
    </Create>
);

`

Answer 1

Как вы знаете, они реализовали кнопку Clone .

Answer 2

Это звучит вполне возможно.Однако это потребует, чтобы вы хорошо понимали внутренности РА и имели редуцированную форму.

У вас есть 2 стратегии.1) Напишите пользовательское действие, прикрепленное кнопкой Clone, которое вызовет API и перенаправит на страницу Create.Ответ API должен быть направлен на заполнение ключа 'формы' (это ключ в состоянии редукции, где хранятся данные формы) в состоянии с выбранной записью, когда пользователь нажимает кнопку клона

2)Напишите подключенный компонент формы с редуксом (вам, возможно, придется написать собственный компонент ReduxForm, но вы можете начать с использования компонента RA SimpleForm, возможно, он будет работать), используя затем функцию MapStateToProps для получения данных в ваш компонент.Это будет работать, если RA не очищает состояние избыточности при перенаправлении на страницу создания.Вам придется исследовать это.

Хорошо. Это то, что вы сделали бы для стандартного создания маршрута.То, что вы хотите сделать, это «Пользовательское поведение».Под капотом компонент Create использует Redux Form для обработки формы.

https://redux -form.com / 7.3.0 /

Таким образом, все пользовательские входы напрямую отправляются в состояние избыточности.Вам нужно будет создать пользовательскую форму Redux, которая берет данные из штата и заполняет вашу форму начальными данными.Посмотрите на нижний ответ о создании пользовательской формы в AOR.

Как богато оформить AOR Редактировать страницу