首页 > 解决方案 > 当我单击行时如何更改列表的行背景

问题描述

我正在使用 react-admin 为我的程序工作。当我使用时,我不知道如何在单击它时设置行的背景颜色。

const rowStyle = record => ({
  backgroundColor:
    record.id === window.location.pathname.split('/')[2] ? '#e0e0e0' : '',
});
    <List
      {...props}
      bulkActions={false}
      actions={<ListActions />}
      exporter={exporter}
      pagination={<Pagination />}
      filters={<SaleInventoryFilter />}
    >
      <Datagrid rowClick="show" rowStyle={rowStyle}>
        <TextField source="item.code" label="Item code" />
        <TextEllipsisField
          source="item.name"
          label="Item name"
          cellClassName={classes.name}
        />
        <TextField source="stockLocation.name" label="Stock location" />
        <TextField source="batch" />
        <TextField source="leadTime" label="Lead time (days)" />
        <TextField source="onHandQty" label="On hand" />
        <TextField source="availableQty" label="Available" />
        <TextField source="reservedQty" label="Reserved" />
        <DateField
          source="updatedAt"
          label={`Updated At (${getOffsetByTimezone()})`}
        />
        <OperationButton />
      </Datagrid>
    </List>

以上是我的工作,但它的工作总是有延迟。它需要等待组件的重新渲染。我希望当我单击该行时,无论组件是否重新渲染,行背景颜色都会立即变为红色。

标签: react-admin

解决方案


推荐阅读