React --TodoList子组件向父组件传值

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem.js';
/**
 *
 *
 * @class TodoList  父组件
 * @extends {Component}
 */
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '学语文',
            list: ['学英语', '学数学']
        }
        this.handleItemDelete = this.handleItemDelete.bind(this)
    }
    render() {
        return (
            <Fragment>
                <div>
                    <input value={this.state.inputValue}
                        onChange={this.handleInputChange.bind(this)} />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                {/* Click 向子组件传递 */}
                <TodoItem list={this.state.list} Click={this.handleItemDelete} />



            </Fragment>
        )
    }
    /**
     *处理input输入,将输入的值写入state.inputValue
     *
     * @param {*} e
     * @memberof TodoList
     */
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value,
        })

    }
    /**
     *将inputValue注入到List数组中并自动在列表中显示
     *
     * @memberof TodoList
     */
    handleBtnClick() {

        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: '',
        })
    }
    /**
     *
     *点击删除列表的一个List,更新List
     * @param {*} index  从子组件中获取
     * @memberof TodoList
     */
    handleItemDelete(index) {
        console.log(index);
        let list = [...this.state.list];
        list.splice(index, 1);// 删除所选中的list(index)
        this.setState({
            list: list,
        })

    }
}

export default TodoList;

import React, { Component } from 'react';
/**
 *
 *
 * @class TodoItem   子组件 显示列表
 * @extends {Component}
 */
class TodoItem extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            < ul >
                {
                    this.props.list.map((item, index) => {

                        //  通过this.props.Click(this,index)使用父组件
                        //bind(this,index) this-使用的当前作用域 
                        //                index-传递当前所选的list
                        return <li key={index} onClick={this.props.Click.bind(this, index)}>{item}</li>
                    })
                }
            </ul >
        )

    }
}
export default TodoItem;