使用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;

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