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];//拷贝一个listlist.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;