Reactjs react-admin Datagrid如何获取选中行id并返回给父表单

核心问题原因 #

react-admin 的 <Datagrid> 会自动给所有子列组件注入 record 属性（代表当前行数据），你原来直接把按钮写在 Datagrid 里，没有对应的组件承接自动注入的 record，所以拿不到当前行数据。

调整步骤 #

1. 补全缺失的导入与 dataProvider 调用语法
2. 封装独立的选择按钮组件，承接 Datagrid 注入的 record 属性
3. 点击按钮时直接把当前行 id 传给上层的 callback

修正后完整代码 #

import React, {useEffect, useState} from 'react';
import {Datagrid, useDataProvider, TextField} from 'react-admin'; // 补全缺失的导入
import keyBy from 'lodash/keyBy';

// 独立封装的选择按钮组件，会自动接收Datagrid注入的record
const SelectRowButton = ({ callback, record }) => {
  return <button onClick={() => callback(record.id)}>Select Row</button>
};

export const ProBusqueda = (props) => {
    const dataProvider = useDataProvider();
    const [StateData, setStateData] = useState([]);

    useEffect(() => {
        // 补全dataProvider.getList的必填参数，第二个参数为查询配置，无特殊需求传空对象即可
        dataProvider.getList('DetailPro', {})
            .then(({data}) => {
                setStateData(data);
            })
    }, [dataProvider]); // 补全useEffect依赖项避免警告

    return (
        <div>
            <div style={{margin: '1em'}}>
                <Datagrid
                    data={keyBy(StateData, 'id')}
                    ids={StateData.map(({id}) => id)}
                >
                    {/* 传入上层的callback即可，record会由Datagrid自动注入 */}
                    <SelectRowButton callback={props.callback} />
                    <TextField label="id" source="id"/>
                    <TextField label="Razon social" source="raz"/>
                </Datagrid>
            </div>
        </div>
    )
};
export default ProBusqueda;

上层组件调用参考 #

你在上层表单组件中调用 ProBusqueda 时，传入 callback 接收 id 即可：

// 上层组件代码示例
const [selectedProId, setSelectedProId] = useState('');

// 抽屉内渲染ProBusqueda
<ProBusqueda callback={(id) => {
  setSelectedProId(id);
  // 此处可补充关闭抽屉的逻辑
}} />

内容的提问来源于stack exchange，提问作者Julian