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

如何解决使用 rowEvents react-bootstrap-table 修改行单元格的样式

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

例如，当我输入一行时，该行的日期单元格切换为图标而不是文本。 这是我的标签的样子：

这是我想要的（我的 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,headerStyle: (column,colIndex) => {
            return { width: '60%'};
          },style: (column,colIndex) => {
            return {fontSize: "110%"};
          },{
          datafield: "size",text: "Taille",colIndex) => {
            return { width: '90px'};
          },formatter: sizeformatter
        },{
          datafield: "date",text: "Date",colIndex) => {
            return { width: '20%'};
          },//formatter: dateFormatter
        },{
          datafield: "action",text: "Action",hidden: false,formatter: rankFormatter,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,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>

谢谢;)

解决方法

这个人遇到了同样的问题，它给了我解决方案：How to restrict multiple adding and removing classnames on table row mouse-events

谢谢他:)