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: