时间戳

首页 > 解决方案 > 在 react-admin 中使用 API 调用的默认值填写创建表单

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

问题描述

我对 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 请求，但我无法弄清楚：

我的想法是我可以以某种方式“重载”创建按钮的默认功能。

标签： reactjsreact-admin

解决方案

好吧，我从未使用过 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;

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

推荐阅读