【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;