安装好node后可以用
npx create-react-app my-app 初始化
引入 ant-mobile的组件
最终效果 未点击时
点击后
代码
- 创建一个显示button的组件
import React from 'react';
// react 中所有的组件都需要继承 React.Component
class SingleRecord extends React.Component {
// 构造函数 props由父组件传入
constructor(props) {
super(props);
// 标记button点击状态
let complete = false;
this.state = {
complete: complete
}
}
// button 点击时间响应 如果被点击 就改变complete字段的值
buttonOnClick() {
//重新绘制组件
this.setState({
complete: !this.state.complete
});
}
// 依据点击状态获取css-class
get_button_class(complete) {
if (!complete) {
return "tag-button";
}
return "tag-button tag-button-selected";
}
get_span_class(complete) {
if (!complete) {
return "correct hide";
}
return "correct";
}
// 组件渲染函数
render() {
// <div></div> 是jsx支持的语法 这么写更加简洁
return (
<div className="tag-dev">
<button className={this.get_button_class(this.state.complete)} onClick={() => this.buttonOnClick()}>
<span class={this.get_span_class(this.state.complete)}></span>
</button>
<br/>
<span>111</span>
</div>
);
}
}
export {SingleRecord}
css文件
.tag-button {
width: 50px;
height: 50px;
border-style: solid;
border-radius: 50%;
border-color: #0a0a0a;
border-width: 1.5px;
background-color: aquamarine;
text-align: center;
}
.tag-button-selected {
background-color: #ffffff;
border-color: rgb(141, 240, 12);
border-right-color: rgb(141, 240, 12);
border-bottom-color: rgb(141, 240, 12);
}
/* 对勾绘制 */
.correct {
display: inline-block;
width: 10px;
height: 3px;
background: #008100;
line-height: 0;
font-size: 0;
margin-left: -10px;
-webkit-transform: rotate(45deg);
}
.correct:after {
content: '/';
display: block;
width: 20px;
height: 3px;
background: #008100;
-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
.hide {
display: none;
}
.tag-dev {
margin-left: 30px;
margin-top: 10px;
float: