react学习(一) button点击

安装好node后可以用

npx create-react-app my-app 初始化

引入 ant-mobile的组件

最终效果 未点击时
未点击
点击后
点击后

代码

  1. 创建一个显示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: 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值