React学习记录——classnames
程序员文章站
2022-07-03 09:06:34
...
import React from 'react'
import classNames from 'classnames'
interface State {
count: number,
className: string
}
interface Prop {
}
export default class ReButton extends React.Component<Prop, State> {
constructor(props: any) {
super(props)
this.add = this.add.bind(this)
this.state = {
count: 0,
className: ''
}
}
add(e: any) {
e.preventDefault()
let className = classNames({
"re-button": this.state.count % 2 == 1
})
this.setState({
count: this.state.count + 1,
className: className
})
}
render() {
return (
<div>
<button className={this.state.className} onClick={this.add}>测试</button>
<div>
{this.state.count}
</div>
</div>
)
}
}
最终效果:
推荐阅读
-
php和mysql web开发学习记录
-
PHP5 面向对象(学习记录)_PHP教程
-
Yii2的相关学习记录,Gridview小部件使用及kartik-v/yii2-grid扩展(五),yii2gridview
-
MySQL学习13:操作数据表中的记录(一)
-
MySQL学习足迹记录02--SELECT_MySQL
-
MySQL学习足迹记录11--分组数据--GROUP BY,HAVING_MySQL
-
MySQL学习足迹记录01--SOURCE,SHOW_MySQL
-
JavaScript基本概念初级讲解论坛贴的学习记录_基础知识
-
Yii2的相干学习记录,初始化Yii2(二)
-
MySQL学习笔记之六 向数据表插入行记录_MySQL