我在用反应表 https://www.npmjs.com/package/react-table#installation在我的应用程序中。
我坚持做一件事,即改变CSS
of columns
当调整列大小时。
目前当你resize
仅一列cursor
变化。我想要的是添加border
to the selected column
.
我在上面搜索了这个SO
and google
以及。但找不到任何有用的东西。在文档中也没有提及有关此主题的内容。
Update
现在,我可以在调整大小时拖动列的同时添加边框。我可以通过添加和删除课程来做到这一点。
我为此做了什么:
在状态中为 className 创建了一个 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});
}
但我仍然无法在悬停时添加边框。
现在,我在 header 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> ,