react学习：React状态

版权声明：欢迎关注博主公众号：矿洞程序员 https://blog.csdn.net/qq_32423845/article/details/89312507

实现一个点赞按钮。点击数字增加

一：建立LikeButton.js 

import React from 'react'

class LikeButton extends React.Component{
    constructor(props){
        super(props)
        this.state={
            likes:0
        }
        // this.increaseLikes=this.increaseLikes.bind(this);
    }

    increaseLikes(){
        // alert(1234)
        this.setState({
            likes:++this.state.likes
        })
    }
    render(){

        return (
            <div className="likes-button-component">
                <button type="button" className="btn btn-outline-primary btn-lg" onClick={()=>{this.increaseLikes()}}>
                    {this.state.likes}
                </button>
            </div>
        )
    }
}

export default LikeButton

二：在App.js 中引入；

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
import LikesButton from './components/LikeButton';
const tags=['男神']
class App extends Component {

  render() {
    return (
      <div className="App">
         <div className={"App-header"}>
             <img src={logo} className={"App-logo"} alt={"logo"}/>
             <h2>欢迎来到矿洞程序员</h2>
             {/*<NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />*/}
             <LikesButton/>
         </div>
         </div>
    );
  }
  }

export default App;

三、查看效果：