react学习：React状态

àì夳堔傛蜴生んèń 2022-02-19 02:19 189阅读 0赞

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

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

三、查看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220219/e9fd535ca6ef4ebab789417eef0e5c56.png