Question

我在我的应用程序中使用react-table。

我一直在做一件事，即在调整列的大小时更改CSS的{{1}}。

目前，只有columns列只有resize更改。我想要的是将cursor添加到border。

我也在selected column和SO上搜索过此内容。但找不到任何有用的东西。在文档中也没有提到关于这个主题的内容。

更新

现在，我可以在调整大小时拖动列时添加边框。我可以通过添加和删除课程来实现。

我做了什么：

为className创建了一个var：

google

在我的专栏中传递了这个班级名称：

  this.state = {
         addBorder: null
   }

拖动结束时删除类：

     const columns = [{
    Header: 'Name',
    accessor: 'name', // String-based value accessors!,
    headerClassName: this.state.addBorder,
    className: this.state.addBorder
}, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{2}</span> // Custom cell components!
}, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
}, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
}];

return (
    <div onMouseUp={this.handleMouseUp}>
    <ReactTable
        data={data}
        columns={columns} 
        resizable={true}
        onResizedChange={(col, e) => {
            const column = col[col.length-1];
            this.setState({addBorder: column.id})
        }} />
        </div>
)
}

但我仍然无法在悬停时添加边框。

现在，我将自定义HTML发送到标题道具中。在我的HTML中，我做了一个额外的div。我把这个div移到了右边。在这个div的悬停时，我会发出鼠标事件并相应地更改CSS。

但是负责调整列大小的标题中的现有div与我的Div重叠。

   handleMouseUp (e) {
    this.setState({addBorder: null});
}

Answer 1

根据我的理解，当您将鼠标悬停在列标题上时，您希望添加一些边框。如果我的理解是正确的，您可以在标题类
上使用:hover伪选择器

.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}

更新：

您可以在react-table

公开的onResizedChange处理程序中操作状态

onResizedChange={(newResized, event) => {
  let resizedCol = newResized.slice(-1)[0].id;
  if(this.state.activeCol !== resizedCol) {
    this.setState({
      activeCol: resizedCol,
      resizing: true
    })
  }
}}

此外，请确保您必须在resizing事件中将false州设置为mouseup。为此，我提出了以下解决方案。

componentDidUpdate(props, state) {
  if (this.state.resizing && !state.resizing) {
    document.addEventListener('mouseup', this.onMouseUp);
  } else if (!this.state.resizing && state.resizing) {
    document.removeEventListener('mouseup', this.onMouseUp);
  }
}

onMouseUp = (evt) => {
  this.setState({
    activeCol: '',
    resizing: false
  });
  evt.stopPropagation();
  evt.preventDefault();
}

供参考：

＆＃13;

const ReactTable = window.ReactTable.default

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeCol: '',
      resizing: false
    }
  }
  
  componentDidUpdate(props, state) {
    if (this.state.resizing && !state.resizing) {
      document.addEventListener('mouseup', this.onMouseUp);
    } else if (!this.state.resizing && state.resizing) {
      document.removeEventListener('mouseup', this.onMouseUp);
    }
  }
  
  onMouseUp = (evt) => {
    this.setState({
      activeCol: '',
      resizing: false
    });
    evt.stopPropagation();
    evt.preventDefault();
  }
  
  render() {
    const data = [{
      name:"Mark",
      age:24
    },
    {
      name:"Derek",
      age:26
    }]

    const columns = [{
          Header: 'Name',
          accessor: 'name', // String-based value accessors!,
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'name') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }, {
          Header: 'Age',
          accessor: 'age',
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'age') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }];

    return <ReactTable
      data = { data }
      columns = { columns }
      showPagination= {false}
      onResizedChange={(newResized, event) => {
        let resizedCol = newResized.slice(-1)[0].id;
        if(this.state.activeCol !== resizedCol) {
          this.setState({
            activeCol: resizedCol,
            resizing: true
          })
        }
      }}
    />
  }
}

ReactDOM.render( < App / > , document.getElementById("app"))

＆＃13;

.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}


.borderCellCls {
  border-right: 2px solid rgba(0,0,0,0.6) !important;
  border-left: 2px solid rgba(0,0,0,0.6) !important;
}

.defaultCellCls {
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link>
<div id="app"></div>

＆＃13;

你可以玩CSS。希望这是你想要的，希望这会有所帮助。

<强>更新

我认为你必须使用CSS来达到你想要的目标。

.borderCellCls {
   border-right: 2px solid rgba(0,0,0,0.6) !important;
   border-left: 2px solid rgba(0,0,0,0.6) !important;
}

Answer 2

如果您想了解如何将 className 设置为列单元格（使用 react-table），这里是解决方案：

1)

<tr
            
              {...row.getRowProps()}
            >
              {row.cells.map((cell) => (
                <td
                  {...cell.getCellProps([
                    {
                      className: cell.column.className, // pay attention to this
                      style: cell.column.style,
                      // set here your other custom props
                    },
                  ])}
                >
                  {cell.render('Cell')}
                </td>
              ))}
            </tr>

2)

  const columns = React.useMemo(
() => [
  {
    Header: 'Date',
    accessor: 'date',
    minWidth: 70,
    className: 'text-dark fw-bolder fs-6 min-w-70px', // pass className props here
    headerClassName: 'text-muted', // or another props like this one
  }]
  
<Table columns={columns} ... />

最后，那些道具将被传递到你的单元格

如何更改列的CSS - ReactTable

2 个答案: