react todolist 增加和删除

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

一、创建项目 查看react官方文档 reactjs.bootcss.com/docs/create…

npx create-react-app my-app
cd my-app
yarn start

二、精简代码 刚刚开始接触react，创建完react项目以后，感觉文件好多，好复杂，这个时候我们把不需要的文件删掉，对于这个项目来说，我的src文件夹里面就剩下index.js入口文件，App.js文件，其他全部删掉，包括在index.js 和 App.js文件中的相关引用，也全部清除，这样，这个项目就精简了很多，并且对我们的todolist毫无影响,为了我们很快认识react的项目 1.将App.js重命名为Todolist.js，以及index.js中引入的App替换成Todolist 2.下文中TodoItem.js是个子组件

Todolist.js

import React from 'react';
import TodoItem from './TodoItem'

/**
 * Todolist是父组件
 * TodoItem 是子组件
 * 父组件向子组件用属性来进行传值
 * 子组件通过props来接收父组件传过来的参数
 * 子组件想和父组件通信。直接调用父组件的方法即可 eg： this.props.delete()
 * 
 * * */
class Todolist extends React.Component {
//初始化
  constructor(props){
    super(props)
    this.state = {
      list:[],
      value:''
    }
    //优化
    this.handleClick = this.handleClick.bind(this)
    this.changeInput = this.changeInput.bind(this)
    this.removeItem = this.removeItem.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
  }
  handleClick(){
    this.setState({
      list:[...this.state.list,this.state.value],
      value:''
    })
  }
  changeInput(e){
    this.setState({
      value:e.target.value
    })
  }
  removeItem(index){
    const list = [...this.state.list]
    list.splice(index,1)
    this.setState({
      list
    })
    //这种方法虽然可以实现删除功能，但不建议直接操作state里面的值，会影响调试且性能低下
    // this.state.list.splice(index,1)
    // this.setState({
    //   list:this.state.list
    // })
  }
  deleteItem(index){
    const list = [...this.state.list]
    list.splice(index,1)
    this.setState({
      list
    })
  }
  getList(){
    return (
      this.state.list.map((item,index) =>{
              
        // 组件拆分之前
        // return <li key={index} onClick={this.removeItem.bind(this,index)}>{item}</li>
        // 组件拆分之后
        return <TodoItem content={item} key={index} index={index} delete={this.deleteItem}/>
      })
    )
  }
  render() {
    return (
      <div>
        <input type="text" placeholder="请填写要添加的内容" onChange={this.changeInput} value={this.state.value}/>
        <button onClick={this.handleClick}>add</button>
        <ul>
          {
            this.getList()
          }
        </ul>
      </div>
    )
  }
}

export default Todolist;

TodoItem.js

import React from 'react'
class TodoItem extends React.Component{
    constructor(props){
        super(props)
        this.remove = this.remove.bind(this)
    }
    remove(){
        this.props.delete(this.props.index)
    }
    render() {
    //解构赋值
        const {content} = this.props
        return (
            <li onClick={this.remove}>{content}</li>
        )
    }
}
export default TodoItem