求和案例（纯react版本）

文章目录 新建react项目实现求和案例入口文件index.jsApp.js（入口组件）Counter/index.jsx（Counter组件）

新建react项目

create-react-app，新建react项目。
当前，create-react-app创建的react项目默认使用的是react@18。本项目要使用react17，因此手动降版本，npm install --save react@17 react-dom@17。

实现求和案例

实现求和案例，代码变更涉及的文件有：

入口文件index.js入口组件App.js求和组件components/Counter/index.jsx 入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />,document.getElementById("root"));

App.js（入口组件）

import React, { Component } from 'react'
import Counter from "./components/Counter";

export default class App extends Component {
  render() {
    return (
      <div>
        <Counter/>
      </div>
    )
  }
}

Counter/index.jsx（Counter组件）

import React, { Component } from 'react'

export default class Counter extends Component {

    state = {count:0}

    increment = () => {
        const {value} = this.selectEl;
        const {count} = this.state;
        this.setState({count:count+Number(value)});
    }
    decrement = () => {
        const {value} = this.selectEl;
        const {count} = this.state;
        this.setState({count:count-Number(value)});
    }
    incrementOdd = () => {
        const {value} = this.selectEl;
        const {count} = this.state;
        if(count % 2 !== 0){
            this.setState({count:count+Number(value)});
        }
    }
    incrementWait = () => {
        const {value} = this.selectEl;
        const {count} = this.state;
        setTimeout(() => {
            this.setState({count:count+Number(value)});
        },1000)
    }

  render() {
    const {count} = this.state;
    const {increment,decrement,incrementOdd,incrementWait} = this;
    return (
        <div>
            <h2>当前求和为{count}</h2>
            <select ref={c => this.selectEl = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={increment}>+</button>&nbsp;
            <button onClick={decrement}>-</button>&nbsp;
            <button onClick={incrementOdd}>和为奇数时加</button>&nbsp;
            <button onClick={incrementWait}>等一等再加</button>
        </div>
    )
  }
}