用 rowEvents react-bootstrap-table 修改一行单元格的样式

Question

我在 React 中使用 BootstrapTable 组件，我想知道是否有人知道如何在输入时切换一行单元格内的内容。

例如，当我输入一行时，该行的日期单元格切换为图标而不是文本。这是我的标签的样子：这是 a 想要的（我能用我的 Photoshop 技能做的最好的）：这是我的一些代码（这是一个很大的代码，但主要部分在这里）：

    const columns = [
        {
          dataField: "type",
          text: "Type",
          sort: false,
          sortCaret: sortCaret,
          headerSortingClasses,
          style: {
            maxWidth: "10px",
          },
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '60px'};
          },
          formatter: typeFormatter
        },
        {
          dataField: "name",
          text: "Nom",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (column, colIndex) => {
            return { width: '60%'};
          },
          style: (column, colIndex) => {
            return {fontSize: "110%"};
          },
        },
        {
          dataField: "size",
          text: "Taille",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '90px'};
          },
          formatter: sizeFormatter
        },
        {
          dataField: "date",
          text: "Date",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '20%'};
          },
          //formatter: dateFormatter
        },
        {
          dataField: "action",
          text: "Action",
          hidden: false,
          formatter: rankFormatter,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '80px'};
          }
        },
      ];
    
        const rowEvents = {
            onMouseEnter: (e, row, rowIndex) => {
              console.log(rowIndex)
              console.log("id: " + row.id);
              console.log("name: " + row.name);
              console.log("size: " + row.size);
              console.log("type: " + row.type);
              console.log("date: " + row.date);
            },
            onMouseLeave: (e, row, rowIndex) => {
              console.log("leave");
            }
          }
         
export function getSelectRow(props) {
  
  const { entities, ids, setIds } = props;
  return {
    mode: "checkbox",
    clickToSelect: true,
    hideSelectAll: false,
    selectionHeaderRenderer: () => {
      const isSelected =
        entities && entities.length > 0 && entities.length === ids.length;
      const props = { isSelected, entities, setIds };
      return (
        <SelectionCheckbox
          isSelected={isSelected}
          onChange={() => groupingAllOnSelect(props)}
        />
      );
    },
    selectionRenderer: ({ rowIndex }) => {
      const isSelected = ids.some((el) => el === entities[rowIndex].id);
      const props = { ids, setIds, customerId: entities[rowIndex].id };
      return (
        <SelectionCheckbox
          isSelected={isSelected}
          onChange={() => groupingItemOnSelect(props)}
        />
      );
    },
    style: { backgroundColor: '#e8fbff' }
  };
}
        
            <BootstrapTable
                        wrapperClasses="table-responsive"
                        bordered={false}
                        classes="table table-head-custom table-vertical-center"
                        bootstrap4
                        remote
                        hover
                        keyField="id"
                        rowEvents={rowEvents}
                        data={entities === null ? [] : entities}
                        columns={props.columns}
                        defaultSorted={uiHelpers.defaultSorted}
                        onTableChange={getHandlerTableChange(
                          customersUIProps.setQueryParams
                        )}
                        selectRow={
                           getSelectRow({
                            entities,
                            ids: customersUIProps.ids,
                            setIds: customersUIProps.setIds
                         })
                      }
                        {...paginationTableProps}
                      >
              </BootstrapTable>

谢谢 ;)

Answer 1

这个人遇到了同样的问题，他给了我解决方案：

谢谢他:)

用 rowEvents react-bootstrap-table 修改一行单元格的样式

Modify the style of a cell of a row with rowEvents react-bootstrap-table

cell

hover

reactjs

react-bootstrap-table