创建一个React项目实现一个计算器

使用环境react脚手架

node.js
create-react-app 文件名

配置完这些就让我们开始把
count.js

import React, { Component } from 'react'
import store from '../redux/store.js'
export default class Computer extends Component {
  state = {
    count: 0
  }
  // 加
  addcount = () => {
     this.setState({
       count: this.state.count + this.refSelect.value * 1
     })
  }
  // 减
  minuscount = () => {
    this.setState({
     count: this.state.count - this.refSelect.value * 1
     })
  }
  // 乘
  ridecount = () => {
     this.setState({
       count: this.state.count * this.refSelect.value
     })
  }
  // 异步加
  asynccount = () => {
    setTimeout(() => {
     this.setState({
       count: this.state.count + this.refSelect.value * 1
     })
    }, 1000)
  }
  render() {
  const {count} = this.state
    return (
      <div>
        <h2>得到的参数是:{count}</h2>
        <select ref={e => (this.refSelect = e)}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
        </select>
        <button onClick={this.addcount}>+</button>&nbsp;
        <button onClick={this.minuscount}>-</button>&nbsp;
        <button onClick={this.ridecount}>*</button>&nbsp;
        <button onClick={this.asynccount}>异步加</button>&nbsp;
      </div>
    )
  }
}