Заполните форму Create значениями по умолчанию из API-вызова в реагирующем администраторе

Question

Я все еще довольно неопытен с React и response-admin.Я искал много ресурсов, но не смог найти никаких ценных подсказок.Мой пример использования следующий:

Status Quo

Вот пример одного из моих List компонентов.Это обеспечивает кнопку по умолчанию для создания нового элемента, который перенаправляет пользователя в представление Create.

export const CountryList = props => (
  <List
    sort={{ field: "name", order: "ASC" }}
    filters={<CountryListFilter />}
    {...props}
  >
    <Datagrid>
      <TextField source="name" />
      <TextField source="iso3" />
      <EditButton />
    </Datagrid>
  </List>
);

Желаемое поведение

Вместо пустой формы Create, которую я хотел быобеспечить динамические значения по умолчанию.Если пользователь нажимает кнопку «Создать» в представлении List, я бы хотел, чтобы произошло следующее:

1. Приложение отправляет пользовательский запрос GET на внешний сервер (вне области действияуже определенный dataProvider)
2. Данные ответа на этот запрос используются для заполнения формы Create.

Хотя я знаю, как использовать, например, axios для выдачи запроса GET,Я не рассчитываю:

• Где / по какому триггеру я бы отправил запрос?
• Как передать данные ответа в значения формы по умолчанию?

Моя идея заключалась в том, что я могу как-то "перегрузить" функциональность по умолчанию кнопки создания.

Answer 1

Ну, я никогда не использовал реактив-админ, но я постараюсь вам помочь.

• Где / по какому триггеру я бы выполнил запрос?

В вашей кнопке «Создать» должна быть функция события onClick.И вы отправляете запрос туда и вызываете this.setState для повторного рендеринга вашего компонента

• Как мне передать данные отклика в значения формы по умолчанию?

Через штат или реквизиты:)

Моя идея будет выглядеть примерно так:

import React, { Component } from 'react';

class Example extends Component {
  state = { input: "default" }

  handleInputChange = evt => {
    console.log("user changing input")
    this.setState({ input: evt.target.value });
  }

  handleClick = () => {
    console.log("user clicked the button")
    // server request part...
    .then(data => this.setState({input: data}))
  }

  render() { 
    return ( <div>
      <input value={this.state.input} type="text" placeholder="ISO" onChange={evt => this.handleInputChange(evt)}></input>
      <button onClick={this.handleClick()}></button>
    </div> );
  }
}

export default Example;

Я действительно не знаю, сделал ли я вас более запутанным: /