[JavaScript知识库]React ES6扩展运算符、父传子现实TodoList增加、删除

//***父组件 TodoList.js>
import React, { Component } from 'react'
import TodoItem from './TodoItem';
import "./style.css"

class TodoList extends Component {
    //类中必有constructor函数 而且会最先执行
    constructor(props) {
        super(props);
        this.state = {
            inputValue: 'dd', //input框内容
            list: ["学习英文", "学习react"] //列表的每一项
        }
        //组件初始化时就把this指向改好，有益性能
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleButtonClick = this.handleButtonClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
    }
    //双向绑定
    handleInputChange(e) {
        this.setState({ inputValue: e.target.value },)
    }
    //点击提交按钮给this.state.list加一项并渲染在页面
    handleButtonClick() {
        this.setState({
            //...this.state.list相当于目前的展开的this.state.list"学习英文", "学习react",将新的这项也加给list
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
    //点击删除某个todolist
    handleItemDelete(index) {
        const list = [...this.state.list];//拷贝数组 因为immutable--state不允许修改
        list.splice(index, 1)
        this.setState({
            list: list
        })
    }
    render() {
        return (
            <React.Fragment>
                <div>
                    <label htmlFor="insert">输入内容</label>
                    <input
                        id="insert"
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.handleInputChange} />
                    <button onClick={this.handleButtonClick}>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            // 以下全是父传子，子组件中以props接收
                            return (
                                <TodoItem
                                    key={index}
                                    content={item}
                                    idx={index}
                                    deleteItem={this.handleItemDelete}>
                                </TodoItem>
                            )
                            //如果不用子组件 在return中就是以下写法
                            // <li
                            //     key={index}
                            //     onClick={this.handleItemDelete}>
                            //     {item}
                            // </li>
                        })
                    }
                </ul>
            </React.Fragment>
        )
    }
}
export default TodoList;

//***子组件 TodoItem.js>
import React, { Component } from "react";

export default class TodoItem extends Component {
  constructor(props) {
    super(props);
  }
  //点击时调用父组件传过来的方法，参数为父组件传过来的index
  handleClick() {
    //解构赋值改变this.props.xxx写法
    const { deleteItem, idx } = this.props
    deleteItem(idx)
  }

  render() {
    //解构赋值改变this.props.xxx写法
    const { content } = this.props
    return <div onClick={this.handleClick.bind(this)}>{content}</div>
  }
}