react-admin 保存来自自定义组件的数据答案

【问题标题】：react-admin save data from custom componentreact-admin 保存来自自定义组件的数据
【发布时间】：2020-09-11 18:15:49
【问题描述】：

我是 JS 和 React 的新手。

我的目标是用 react-admin 列表中的当前记录填充包含 react-seat-picker 的自定义编辑。然后我选择了一个座位，我想通过默认的保存按钮保存新的座位选择？

我正在使用 react admin 尝试将 react-seat-picker 集成到自定义创建表单中。我设法通过 react-admin 从数据库中引入 react-seat-map 值，但是当我保存时没有变化发生。在控制台中，我看到按下 SAVE 按钮时触发了 UPDATE，但它始终包含在查询中填充的相同数据对象。

export const SeatEdit = (props) => (
      <Edit {...props}>
        <SimpleForm>
          < SeatInput /> 
        </SimpleForm>
      </Edit>

然后我有这个自定义功能组件：

const SeatInput = ({ record }) => {    
    ......
    const { data, loading, error } = useQuery({ 
         type: 'getOne', 
         resource: 'Seats',
         payload: { id: record.id }
    });

    if (loading) return <Loading />;
    if (error) return ('error');
    if (!data) return null;

    ....

然后我使用 data.id、data.seat 等访问数据。我填充图形座位图，用户可以单击座位来选择它，然后我希望在我的数据库中使用布尔标志 isReserved 更新座位选择。

当我单击创建视图的默认保存按钮时，我在浏览器控制台日志中看到触发了更新，但它包含我从查询中返回的初始数据对象，尽管我在功能组件调用期间为其分配了不同的值。

谢谢

【问题讨论】：

标签： javascript reactjs components react-admin

【解决方案1】：

您应该在 react-admin 中为 InputField 使用 useInput 函数

这是带有react-select的示例组件

import * as React from 'react'
import { Labeled, useInput } from 'react-admin'
import AsyncSelect from 'react-select/async';

const SelectAsync = props => {
  const {
    input: { name, onChange, value },
    meta: { touched, error },
    isRequired
  } = useInput(props);

  const customOnChange = (option, type) => {
    if (type.action === "select-option") {
      onChange(option.value)
    }
  }

  return <Labeled label={props.label} fullWidth>
    <AsyncSelect {...props}
      name={name}
      value={value}
      onChange={customOnChange}
      error={!!(touched && error)}
      helperText={touched && error}
      required={isRequired}
    />
  </Labeled>
};

export default SelectAsync

【讨论】：