react一个简单的小demo

此demo，包含了以下知识点

1.React 元素渲染(以及css样式的不同的书写)

2.JSX

3.React 组件和props(父子组件传值，方法调用)

4.React State(状态)

5.React 事件处理

效果图：

目录介绍：

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import  './style.css'

ReactDOM.render(<TodoList />, document.getElementById('root'));

TodoList.js

import React, { Component } from 'react';
import TodoItem from './TodoItem'
class TodoList extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[],
            inputValue:''
        }
        this.handleBtnClickAdd=this.handleBtnClickAdd.bind(this)
        this.handleInputChange=this.handleInputChange.bind(this)
    }

    handleBtnClickAdd(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
        
    }
    handleInputChange(e){
        this.setState({inputValue:e.target.value})
    }   
    handleDel(index){
        console.log(index)
        const list=[...this.state.list]
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
    getHtmlTodoItem(){
       return (
            this.state.list.map((item,index)=>{
                {/*contents={item} index={index}向子组件传值*/}
                {/*delete={this.handleDel.bind(this,index)   TodoItem子组件调用的TodoList父组件handleDel方法*/}
                return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
            })
       )   
    }
  render(){
    return (
        // <React.Fragement>替换<div>。可以在控制台看到外层div就没了
        <div>              
            <div>
                <input className='input-color' value={this.state.inputValue} onChange={this.handleInputChange}/>
                <button style={{marginLeft:"10px",background:'orange',color:'#fff',border:'1px solid orange',height:'34px',width:'50px'}} onClick={this.handleBtnClickAdd}>add</button>
            </div>
            <ul>
                {
                    this.getHtmlTodoItem()     
                    /*this.state.list.map((item,index)=>{            
                        return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
                    })  */           
                }       
            </ul>        
        </div>
    )
  }
}

export default TodoList;

TodoItem.js

import React from 'react';

class TodoItem extends React.Component {    
    constructor(props){
        super(props);
        this.handleBtnClickDel=this.handleBtnClickDel.bind(this)
    }
handleBtnClickDel(){
    console.log(this.props.index) /*父组件传过来的值*/
    this.props.delete(this.props.index)/*调用父组件方法*/ 
}
  render(){
    return (
        <div style={{width:'320px',height:"50px",lineHeight:"50px"}}>
            {/*父组件传过来的值*/}
            <span style={{display:"inline-block",width:'162px'}}>{this.props.contents}</span>
            <button className="button-style" onClick={this.handleBtnClickDel}>del</button>
        </div>
    )
  }
}
export default TodoItem;