Блог

Я все еще довольно неопытен в 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, я не могу понять:

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

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

Ну, я никогда не использовал 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;
  

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