手把手的react计算器小案例

最新推荐文章于 2023-04-07 21:29:32 发布

furfur-jiang

最新推荐文章于 2023-04-07 21:29:32 发布

阅读量521

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44523860/article/details/109270593

版权

React 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

npx create-react-app用脚手架创建一个react项目
在src下创建components/count.jsx
在App.js引入

import logo from './logo.svg';
import './App.css';
import Count from './components/count'
function App() {
  return (
    <div className="App">
      <Count />
    </div>
  );
}

export default App;

在count.jsx写逻辑

import React, { Component } from 'react'
export default class Count extends Component {
    state = {
        count: 0
    }
    increase = (select) => {
        // 得到选择的值
        let number = this.select.value * 1
        // 得到原本的count值，计算新count
        let count = this.state.count
        // 更新状态
        this.setState({ count: count + number })
    }
    decrease = () => {
        // 得到选择的值
        let number = this.select.value * 1
        // 得到原本的count值，计算新count
        let count = this.state.count
        // 更新状态
        this.setState({ count: count - number })
    }
    increaseOdd = () => {
        // 得到选择的值
        let number = this.select.value * 1
        // 得到原本的count值，计算新count
        let count = this.state.count
        // 符合条件更新状态
        if (count % 2) {
            this.setState({ count: count + number })
        }
    }
    increaseSync = () => {
        // 异步更新状态
        setTimeout(() => {
            // 得到选择的值
            let number = this.select.value * 1
            // 得到原本的count值，计算新count
            let count = this.state.count
            this.setState({ count: count + number })
        }, 1000)
    }
    render() {
        let count = this.state.count
        return (
            <div>
                <p>click {count} times</p>
                <div>
                    <select ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increase}>+</button>&nbsp;
                    <button onClick={this.decrease}>-</button>&nbsp;
                    {/* Odd奇数 */}
                    <button onClick={this.increaseOdd}>odd</button>&nbsp;
                    <button onClick={this.increaseSync}>sync</button>&nbsp;
                </div>
            </div>
        )
    }
}