我在我的应用程序中使用react-table。
我被困在做一两件事，即改变CSS的columns同时，一列正在调整。
当前，当您resize仅cursor更改一列时。我想要的是添加border到selected column.
我搜索了这对SO和google也。但找不到任何有用的东西。并且在文档中也没有提到这个主题。
更新
现在我可以在调整大小的同时拖动列的同时添加边框。我可以通过添加和删除类来做到这一点。
我这样做是为了：
为 className 在 state 中创建了一个 var：
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>
)
}
在拖动结束时删除类：
handleMouseUp (e) {
this.setState({addBorder: null});
}
但是我仍然无法在悬停时添加边框。
现在，我在标题props中发送我的自定义 HTML。在我的 HTML 中，我做了一个额外的 div。我已经把这个 div 移到了右边。在这个 div 悬停时，我会发出鼠标事件并相应地更改 CSS。
但是负责调整列大小的标题中的现有 div 与我的 Div 重叠。
Header: props => <div className='header-div'> Name <div onMouseOver = {() => {
console.log('mose');
this.setState({className: 'addBorder'});
}} className='hover-div' onMouseOut = {() => {console.log('sdasd');this.setState({className: null});}}> </div></div> ,