reactjs React-Admin自定义数据网格扩展行事件(v3.19)

fv2wmkja  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(89)

我尝试按照自定义datagrid示例使用react-admin 3.19。https://marmelab.com/react-admin/doc/3.19/List.html#expand
我无法使扩展生效。在下面的例子中,我自己手动添加了扩展按钮,但是不知道如何处理单击事件来显示扩展的行。

const MyDatagridRow = ({ record, resource, id, onToggleItem, children, selected, selectable, basePath }) => (
    <TableRow key={id}>
      {/* first column: selection checkbox */}
      <TableCell padding="none">
        <Checkbox
          disabled={false}
          checked={selected}
          onClick={event => onToggleItem(id, event)}
        />
      </TableCell>
      <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => console.log(record)}
          >
            {true ? <ArrowUpward /> : <ArrowDownward />}
          </IconButton>
        </TableCell>
      {React.Children.map(children, field => (
        <TableCell key={`${id}-${field.props.source}`}>
          {React.cloneElement(field, {
            record,
            basePath,
            resource,
          })}
        </TableCell>
      ))}
    </TableRow>
  );
  const DatagridHeader = ({ children }) => (
    <TableHead>
      <TableRow>
        <TableCell></TableCell>
        {React.Children.map(children, field => (
          <TableCell key={field.props.label}>
            {field.props.label}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
  const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow {...props} selectable={true} />} />;

所以,有没有办法手动触发它?

2q5ifsrm

2q5ifsrm1#

您可以使用与react-admin本身的实现相同的方法。DatagridRow实现使用useExpanded,并且如您所见,存在操作toggleListItemExpand。因此,您可以仅使用资源和id来分派此操作。

相关问题