如何在react-admin的Button组件onClick点击事件中传递参数

修复方案 #

你的代码存在3个核心问题：

• 导入react-admin时缺少横杠，路径拼写错误
• react-admin的Button组件不会自动执行你传给value的函数、也不会把执行结果传给onClick回调
• onClick默认接收的参数是鼠标事件对象，不是你需要的用户id

实现方法1：用useRecordContext拿当前行数据（官方推荐）

import { List, Datagrid, TextField, Button, useRecordContext } from 'react-admin';

// 自定义按钮组件
const LogIdButton = () => {
  // 自动获取当前行的整条记录
  const record = useRecordContext();
  const handleClick = () => {
    console.log(record.id);
  };
  return <Button label="Click" onClick={handleClick} />
}

export const UserList = props => {
  return (
    <List {...props}>
      <Datagrid>
        <TextField source="id" />
        {/* 其他字段 */}
        <LogIdButton />
      </Datagrid>
    </List>
  )
};

实现方法2：直接在Datagrid内用函数获取record

如果你不想单独抽组件，可以直接在Datagrid下返回一个接收record参数的函数：

import { List, Datagrid, TextField, Button } from 'react-admin';

const ShowData = (id) => {
 console.log(id);
}

export const UserList = props => {
  return (
    <List {...props}>
      <Datagrid>
        <TextField source="id" />
        {/* 其他字段 */}
        {record => (
          <Button label="Click" onClick={() => ShowData(record.id)} />
        )}
      </Datagrid>
    </List>
  )
};

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