使用Hook实现加减

import React from 'react'
import { useState } from 'react'
export default function Count() {
    const [count, setCount] =  useState<number>(0)
    const [value, setValue] = useState<number>(0)
    const increment = () => {
        setCount(count + value * 1)
    }
    const decrement = () => {
        setCount(count - value * 1)
    }
    // 奇数再加
    const incrementIfOdd = () => {
        if (count % 2 !== 0) {
            setCount(count + value * 1)
        }
    }
    // 异步加
    const incrementAsync = () => {
        setTimeout(() => {
            setCount(count + value * 1)
        }, 1000)
    }
    const select = (e: any) => {
        const index = e.target.selectedIndex // 选中项的index
        setValue(e.target.options[index].value) // 选中项的value值
    }
    return (
        <div>
            <h1>当前求和为: {count}</h1>
            <select onChange={select}>
                <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={incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
            <button onClick={incrementAsync}>异步加</button>&nbsp;
        </div>
    )
}

效果