react學習：React狀態

標簽： react

實現一個點贊按鈕。點擊數字增加

一：建立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;

三、查看效果：

本文鏈接：https://blog.csdn.net/qq_32423845/article/details/89312507

智能推薦

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

react學習：React狀態

智能推薦

猜你喜歡