React学习（四）：通过 React State 编写点赞按钮

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（三）：通过 React 编写名片组件（React属性）
效果预览：

1. 环境准备

npm -v 8.5.5
node -v v16.15.0
// 进入工程目录启用工程
npm start
// 工程目录中的 index.js 文件中引入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'

注：
State(状态):
组件内部的数据可以动态改变
this.setState() 是更新 state 的唯一途径

2. 代码编写

a. 新建 src/componets/LikesButton.js

b. LikesButton.js 文件中编写以下代码

// React State 示例
/* 
State(状态): 
组件内部的数据可以动态改变
this.setState() 是更新 state 的唯一途径
*/
import { render } from "@testing-library/react";
import React from "react";
class LikesBuytton extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            likes : 0
        }
        // this.increaseLikes = this.increaseLikes.bind(this)
    }
    increaseLikes() {
        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}
                    onClick={() => { this.increaseLikes() }}
                >
                    👍 {this.state.likes}
                </button>
            </div>
        )
    }
}
export default LikesBuytton

c. App.js 中引入 LikesButton 组件

import logo from './logo.svg';
import './App.css';
import LikesBuytton from './componets/LikesButton';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      {/* 引用 LikesButton 组件 */}
      <LikesBuytton />
    </div>
  );
}
export default App;

d. 保存刷新网页即可得到如下结果