【React】非受控组件select的使用&使用react编写counter应用

一、效果图

二、需求描述

      count变量的初始值为0，select的选择值分别为1、2、3，并定义变量number用于获取select当前选择值；

      1. 点击“+”，获取number和count值，并实现简单相加；

      2. 点击“-”，实现count+number；

      3. 点击“increment if odd”，如果count是奇数，count与number相加；

      4. 点击“increment async”，异步相加，设置延时定时器。

三、代码实现

count_non_control.js

import React, {Component} from 'react';

//非受控组件select的使用
class CountNonControl extends Component {
    state = {
        count: 0
    }
    // 增加
    increment = () => {
        const number = this.select.value * 1
        const {count} = this.state
        this.setState({count: count + number})
    }
    // 减少
    decrement = () => {
        const number = this.select.value * 1
        const {count} = this.state
        this.setState({count: count - number})
    }
    // 奇数增加（满足条件后再增加）
    incrementIfOdd = () => {
        const number = this.select.value * 1
        const {count} = this.state
        if (count % 2 === 1) {
            this.setState({count: count + number})
        } else {
            alert(`${count}不是奇数呦！`)
        }
    }

    // 异步增加（设置延时定时器）
    incrementAsync = () => {
        const number = this.select.value * 1
        const {count} = this.state
        setTimeout(() => {
            this.setState({count: count + number})
        }, 1000)
    }

    render() {
        const {count} = this.state
        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>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementIfOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>
        );
    }
}

export default CountNonControl;