八、实例 - 《taro》

todolist
import React, { Component } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { View, Text, Input, Checkbox, } from '@tarojs/components'
import './me.less'
export default class Me extends Component {
  state = {
    list:[],
    todoList:[],
    didList:[],
    inputValue: null
  }
  $instance = getCurrentInstance()
  handleConfirm = (e) => {
    let { list } = this.state
    console.log(e.detail.value)
    let newList = [...list, { value: e.detail.value, checked: false }]
    this.setState({
      list: newList,
      todoList:newList.filter(item=>!item.checked),
      inputValue: ''
    })
  }
  handleCheck = (item) =>{
    let { list,didList } = this.state
    list.forEach(val=>{
      if(val.value === item.value){
        val.checked = true
      }
    })
    didList.push(item)
    this.setState({
      todoList:list.filter(item=>!item.checked),
      didList
    })
  }
  handleUnCheck = (item) =>{
    let { list,todoList} = this.state
    list.forEach(val=>{
      if(val.value === item.value){
        val.checked = false
      }
    })
    todoList.push(item)
    this.setState({
      todoList,
      didList: list.filter(item=>item.checked)
    })
  }
  render() {
    console.log(this.$instance.router.params)
    let { todoList, didList, inputValue } = this.state
    return (
      <View className='me'>
        <Input placeholder='请输入' value={inputValue} onConfirm={this.handleConfirm}></Input>
        <View>待办</View>
        {todoList.map(item => (
          <View key={item.value}><Checkbox onClick={this.handleCheck.bind(this,item)} value='选中' checked={item.checked}>{item.value}</Checkbox></View>
        ))}
        <View>已完成</View>
        {didList.map(item => (
          <View key={item.value}><Checkbox onClick={this.handleUnCheck.bind(this,item)} value='选中' checked={item.checked}>{item.value}</Checkbox></View>
        ))}
      </View>
    )
  }
}