状态现状

这是我的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视图中的“创建”按钮，我希望发生以下情况：

应用程序向外部服务器（已定义的dataProvider的范围之外）发出自定义GET请求
该请求的响应数据用于填充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;

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

在React-admin

状态现状

期望的行为

1 个答案: