css点击事件改变css的样式属性(点击后的样式)

css点击事件改变css的样式属性(点击后的样式)

react点击时改变样式的方法如下:1。通过setState中的回调函数实现点击切换状态时执行的函数；2.通过”

本课程的运行环境:react的react18.0.0版本的Windows S10系统和Dell G3电脑。

点击时React如何改变样式？

React单击/悬停以修改CSS样式

(1)点击修改样式

方法一:(打字稿写作)

type state = { selected: boolean; }; class Measurement extends Component<{}, state> { constructor(props:any) { super(props); this.state = { selected: false }; } handleClick = (e:any) => { this.setState({ selected: !this.state.selected }, () => { if(!this.state.selected){ this.clearAll(); } }); } private rightBtnStyle: CSSProperties = { background:"url(/assets/images/3.png) no-repeat center", border: "none", color: "white" }; private rightBtnStyle2: CSSProperties = { background:"url(/assets/images/1.png) no-repeat center", border: "none", color: "white" }; //省略具体功能 render() { var currentstyle; if(this.state.selected){ currentstyle=this.rightBtnStyle2; } else{ currentstyle=this.rightBtnStyle; } return( <div className="tool-widget"> <Popover placement="left" content={this.content} trigger="click"> <Button className="right-btn" style={currentstyle} onClick={this.handleClick.bind(this)}></Button> </Popover> </div> ); } };

PS:这里点击开关状态时执行的功能可以通过setState中的回调函数来实现。

方法2:(动态添加类名)

用下面的替换上面的渲染

render() { return ( <div className="tool-widget" id="Measurement"> <Popover placement="left" content={this.content} trigger="click"> <Button className={["right-btn", this.state.selected ? "active":null].join(' ')} onClick={this.handleClick.bind(this)}></Button> </Popover> </div> ); }

添加相应的css文件:

#Measurement { .right-btn{ background:url(./images/3.png) no-repeat center; border:none; color: white; width:100%; height: 100% } .right-btn.active{ background:url(./images/1.png) no-repeat center; } }

推荐学习:react视频教程