在 react-admin 中使用 API 调用的默认值填写创建表单

Question

我对 React 和 react-admin 还是很陌生。我搜索了很多资源，但找不到任何有价值的提示。我的用例如下：

现状

这是我的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

好吧，我从未使用过 react-admin，但我会尽力帮助你。

• 我将在哪里/在哪个触发器上发出请求？

在您的“创建”按钮中应该有一个 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;

我真的不知道我是否让你更加困惑：/