如何在排序时设置 react-table header 的样式
How to style react-table header on sorting
有什么方法可以更改 react-table 中选择的 header 的背景颜色。
例如:下图,如果我点击 ID,id 应该将背景颜色更改为红色。
我尝试了所有改变选择背景颜色的可能性。
css
.ReactTable .rt-th {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
white-space: nowrap;
text-overflow: ellipsis;
padding: 7px 5px;
overflow: hidden;
transition: 0.3s ease;
transition-property: width, min-width, padding, opacity;
background: green;
}
如何在渲染组件时设置状态激活并检查条件?
我同意上面关于使用状态来切换类名的说法。下面是我将在简单示例中使用的 javascript、css 和 html。 isActive 属性 设置为 false,然后使用 handleClick 方法切换值。
class Application extends React.Component {
constructor (props) {
super (props);
this.state = { isActive:false }
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
this.state.isActive ? this.setState({ isActive: false }) : this.setState({
isActive: true })
}
render() {
return <div>
<div onClick={this.handleClick} className = { this.state.isActive ? "red" : "green"} > Background Color </div>
</div>;
}}
React.render(<Application />, document.getElementById('app'));
css 相当简单。
.red
background-color: red
.green
background-color: green
和html
<div id="app"></app>
有什么方法可以更改 react-table 中选择的 header 的背景颜色。 例如:下图,如果我点击 ID,id 应该将背景颜色更改为红色。
我尝试了所有改变选择背景颜色的可能性。
css
.ReactTable .rt-th {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
white-space: nowrap;
text-overflow: ellipsis;
padding: 7px 5px;
overflow: hidden;
transition: 0.3s ease;
transition-property: width, min-width, padding, opacity;
background: green;
}
如何在渲染组件时设置状态激活并检查条件?
我同意上面关于使用状态来切换类名的说法。下面是我将在简单示例中使用的 javascript、css 和 html。 isActive 属性 设置为 false,然后使用 handleClick 方法切换值。
class Application extends React.Component {
constructor (props) {
super (props);
this.state = { isActive:false }
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
this.state.isActive ? this.setState({ isActive: false }) : this.setState({
isActive: true })
}
render() {
return <div>
<div onClick={this.handleClick} className = { this.state.isActive ? "red" : "green"} > Background Color </div>
</div>;
}}
React.render(<Application />, document.getElementById('app'));
css 相当简单。
.red
background-color: red
.green
background-color: green
和html
<div id="app"></app>