我在我的申请中使用react-table。
我坚持做一件事,即改变CSS
的columns
,同时调整列的大小。
目前,当你resize
列只有cursor
变化。我想要的是将border
添加到selected column
。
我在SO
和google
上搜索了这个。但找不到任何有用的东西。在文档中也没有提到关于这个主题的内容。
更新
现在,我可以在调整大小时拖动列时添加边框。我可以通过添加和删除类来实现。
我这样做了:
为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});
}
但是我仍然无法在悬停时添加边框。
现在,我将自定义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> ,
根据我的理解,当您将鼠标悬停在列标题上时,您希望添加一些边框。如果我的理解是正确的,你可以在header类上使用
: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();
}
以供参考:
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"))
.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 {
}
<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>
你可以玩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;
}