如何在 react-admin 中传递参数 onClick 按钮？

【问题标题】：How to pass arguments onClick of Button in react-admin?如何在 react-admin 中传递参数 onClick 按钮？
【发布时间】：2021-09-20 07:25:17
【问题描述】：

当有人单击按钮时，我想在console 中显示用户的 ID。但是，它没有显示。我正在使用react-admin。这是我的代码：

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

function ShowData(id) {
 console.log(id);
}

export const UserList = props => {

  return (
    <>
    <List>
           <Datagrid>
                <TextField source="id" />
                ....
                <Button label="Click" onClick={ShowData} value={record => record.id} />
           </Datagrid>
    </List>
    </>
  )
};

【问题讨论】：

数据从哪里来（FormData）。如果您通过 Props 传递它，请确保它存在。

标签： reactjs react-admin

【解决方案1】：

<Button> 不支持 value 属性。在按钮组件之外定义的 onClick 处理程序将无法访问当前记录。

您应该在 Button 周围编写一个包装器，从 RecordContext 获取记录：

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

export const TestButton = (props) => {
   const record = useRecordContext();
   const handleClick = () => {
      console.log(record);
   );
   return <Button onClick={handleClick} {...props} />;
};

您可以在 Fields 文档中了解有关 useRecordContext 挂钩的更多信息：

https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component

【讨论】：