react实现下拉选项计算机+todolist

效果图




代码片段

import React, { Component } from 'react';
class App extends Component {
  state = {
    /* 点击按钮+1 input默认数*/
    num: 1,
    // 简易计算机 默认参数
    c1: 1,
    c2: 1,
    res: 2,
    current: '+',
    // to-do-list状态数据
    list: [{ text: '学习jquery', done: true }, { text: '学习vue2', done: true }, { text: '学习react', done: false }],
    text: '',
  }
  // to-do-list添加数据----------------------------------------------
  addList() {
    // 获取list
    var list = this.state.list
    // 将输入框的值 添加到list数组里 默认done为false
    list.push({ text: this.state.text, done: false })
    // 清空输入框
    this.state.text = ''
    // setState状态 从而更新视图
    this.setState({ list })
  }
  delList(item) {
    // 获取list
    var list = this.state.list
    // 获取当前选中删除的下标 item形参确定哪项
    var index = list.findIndex(i => i.text == item.text)
    // 将选中的下标在list数据里删除  splice数组删除法
    list.splice(index, 1)
    // 更新state 更新视图
    this.setState({ list })
  }
  updateList(item, val) {  //形参item需要传item 和val input的状态也就是done：false/true
    // 获取list
    var list = this.state.list
    // 获取当前选中的下标 
    var index = list.findIndex(i => i.text == item.text)
    // list选中的下标更改done值也就是input的checked状态
    list[index].done = val
    // 更新视图
    this.setState({ list })
    console.log();
  }



  // 点击加加
  add = (val) => {  //val形参 加val
    this.setState({ num: this.state.num + val })
  }
  // 点击减减
  reduce = (val) => {
    if (this.state.num > 0) {
      this.setState({ num: this.state.num - val })
    }
  }
  // 简易计算机 计算结果 -------------------------------------------------------------- 
  total() {
    // 获取减数、被减数、差  便于下边计算简易代码
    var res = this.state.res
    var c1 = this.state.c1
    var c2 = this.state.c2
    // 这里也可以用eval 只不过消耗性能 不建议使用
    if (this.state.current == '+') {
      res = Number(c1 + c2)
    } else if (this.state.current == '-') {
      res = Number(c1 - c2)
    } else if (this.state.current == '*') {
      res = Number(c1 * c2)
    } else if (this.state.current == '/') {
      res = Number(c1 / c2)
    }
    // 更新视图
    this.setState({ res })
  }

  render() {
    // 已完成清单
    var doneList = this.state.list.filter(item => item.done)
    // 未完成清单
    var undoneList = this.state.list.filter(item => !item.done)
    console.log(undoneList);
    return (<>
      {/* 点击按钮+1 */}
      <h1>点击按钮+1</h1>
      <input type="text" value={this.state.num} onChange={e => this.setState({ num: e.target.value * 1 })} />
      <button onClick={this.add.bind(this, 1)}>点击+1</button>
      {/* 简易计算机 */}
      <h1>简易计算机</h1>
      <div className="count">
        <input type='number' value={this.state.c1} onChange={e => this.setState({ c1: e.target.value })} />
        &nbsp;
        <select className='sel' value={this.state.current} onChange={e => this.setState({ current: e.target.value })}>
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">÷</option>
        </select>
        &nbsp;
        <input type='number' value={this.state.c2} onChange={e => this.setState({ c2: e.target.value })} />
        &nbsp;
        <button onClick={this.total.bind(this)}>=</button>
        &nbsp;
        {this.state.res}
      </div>
      {/* 步进器 */}
      <h1>步进器</h1>
      <button onClick={this.reduce.bind(this, 1)}>-</button>
      <input style={{ width: '20px', textAlign: 'center' }} value={this.state.num} onChange={e => this.setState({ num: e.target.value })} />
      <button onClick={() => this.add(1)}>+</button>
      {/* to-do-list */}
      <h1>美妙清单</h1>
      <input type="text" value={this.state.text} onChange={e => this.setState({ text: e.target.value })} />
      &nbsp;
      <button onClick={this.addList.bind(this)}>添加</button>
      <h3>已完成（{doneList.length}）</h3>
      {doneList.map((item, index) => <div key={index}>
        <input type='checkbox' checked={item.done} onChange={(e) => this.updateList(item, e.target.checked)} />
        <span>{item.text}</span> &nbsp;
        <button onClick={this.delList.bind(this, item)}>X</button>
      </div>)}
      <h3>未完成（{undoneList.length}）</h3>
      {undoneList.map((item, index) => <div key={index}>
        <input type="checkbox" value={item.done} onChange={(e) => this.updateList(item, e.target.checked)} />
        <span>{item.text}</span>&nbsp;
        <button onClick={this.delList.bind(this, item)}>X</button>
      </div>)}
    </>);
  }
}

export default App;