在操作列和每一行中添加图标 - 反应管理员答案

【问题标题】：add icons in actions columns and in each row - react admin在操作列和每一行中添加图标 - 反应管理员
【发布时间】：2021-06-17 12:49:37
【问题描述】：

我想在 React admin 中的 List 上添加一列，它必须有两个操作。现在，每个动作都是一列，我不能添加标题。

例如：

<List>
   <Datagrid>
           <TextField label="Id" source="order.id" />
           <DateField label="Inicio" source="startDate" />
           <CheckIcon
            color="action"
            onClick={(e) => confirmOrder(e)}
           />
           <CancelIcon
            color="action"
            onClick={(e) => cancelOrder(e)}
           />
   </Datagrid>
</List>

我想创建一个“操作”列并添加 CheckIcon 和 CancelIcon。

【问题讨论】：

标签： react-admin

【解决方案1】：

将它们包装在自定义字段中：

const OrderActions = () => (
    <>
        <IconButton onClick={(e) => confirmOrder(e)}>
            <CheckIcon color="action" />
        <IconButton>
        <IconButton onClick={(e) => cancelOrder(e)}>
            <CancelIcon color="action" />
        <IconButton>
    </>
)

然后：

<List>
   <Datagrid>
           <TextField label="Id" source="order.id" />
           <DateField label="Inicio" source="startDate" />
           <OrderActions />
   </Datagrid>
</List>

【讨论】：