#reactjs #typescript #graphql #react-admin #react-typescript
Вопрос:
У меня есть простая форма для редактирования камеры
export const CameraEdit: FC<ResourceComponentProps> = (props: ResourceComponentProps) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="name" />
<TextInput source="connection" />
<Button variant="contained" label="Preview"></Button>
</SimpleForm>
</Edit>
);
Когда я нажимаю на Preview
кнопку, я хочу
- получение предварительного просмотра из бэкенда (с использованием GraphQL)
- загрузите изображение
- покажите это в правой части формы
Я не знаю, как это сделать:
- выдайте дополнительный асинхронный запрос (не связанный с редактированием данных), как в обычном приложении react, у меня был контейнер и компонент
- загрузите изображение (результат запроса)
- добавьте дополнительный div в
SimpleForm
— я читал, что он может обрабатывать только прямые входы
Комментарии:
1. Я думаю, что наивным решением было бы использовать
useLazyQuery
с Apollo внутри компонента. В конце концов, приложение React Admin — это просто обычное приложение React. ВнутриSimpleForm
вы можете визуализировать практически все , что захотите.2. @Herku Раньше у меня были отдельные уровни приложений: контейнер для взаимодействия с бэкэндом и компонент в качестве уровня представления. Мне нравится, и я хотел бы скопировать его здесь
3. Я хочу сказать, что не имеет значения, какой компонент вы используете для редактирования. Это может быть один из контейнеров, которые вы описываете. Вам просто нужно будет переслать все реквизиты, предназначенные для
<Edit />
компонента.