【发布时间】：2018-07-27 01:58:40
【问题描述】：
我在我的应用程序中使用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});
}
但我仍然无法在悬停时添加边框。
现在，我将在标题道具中发送我的自定义 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> ,
【问题讨论】：
-
我认为没有处理程序可以做到这一点。但是，您可以使用
onResizedChange回调来弥补。
标签： css reactjs resize react-table