React学习一：todolist页面

效果图：

TodoList页面代码（父组件）

import React from "react";
import TodoItem from './TodoItem';//添加子组件
import './style.css';
class TodoList extends React.Component{
    constructor(props){//构造函数
        super(props);//super继承，如果你用到了constructor就必须写super()，是用来初始化this的，可以绑定事件到this上
                     //如果你在constructor中要使用this.props，就必须给super加参数，super(props)
        this.handleAddBtn=this.handleAddBtn.bind(this);//优化性能
        this.handleInputChange=this.handleInputChange.bind(this);
        this.handleBtnDel=this.handleBtnDel.bind(this);
        this.state={
            list:[],
            inputValue:''
        }
    }
    handleAddBtn(){//新增
        this.setState({
            list:[...this.state.list,this.state.inputValue],//list增加输入的值
            inputValue:''//inputvalue置为空
        })
        
    }
    handleInputChange(e){//给inputvalue赋值
        this.setState({
            inputValue:e.target.value
        })
    }
    handleBtnDel(index){//点击删除
        const list=[...this.state.list];//拷贝一个list
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

    render(){//render中遇到<为html,遇到{}为js代码
        return (//return后面加括号，可以写多行代码
            <div className="App">
            <div>  
                <input value={this.state.inputValue} onChange={this.handleInputChange}/>
                {/* <button style={{background:'red',color:'#fff'}} onClick={this.handleAddBtn}>add</button> 添加行内样式*/}
                <button className='red-btn' onClick={this.handleAddBtn}>add</button>
            </div>
            <ul>
               {this.state.list.map((item,index)=>{
                   return <TodoItem BtnDel={this.handleBtnDel} key={index} content={item} index={index}></TodoItem>
                //    return <li key={index} onClick={() => this.handleBtnDel(index)}>{item}</li>
               })}
            </ul>
            </div>
        );
    }
}

export default TodoList;

TodoItem（子组件）

import React from "react";
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.handleDelete=this.handleDelete.bind(this);
    }
    handleDelete(){
        const {BtnDel,index}=this.props;//es6 对象解构赋值
        BtnDel(index)//父向子传值使用props传递过来的属性,子向父传值使用父组件props传递过来的方法
    }
    render(){
        const {content}=this.props;
        return(
             <div onClick={this.handleDelete}>{content}</div>
        )
    }
}
export default TodoItem;

视频学习链接：https://www.imooc.com/learn/1023