react 编写一个待办事项，函数优化，组件传值

待办事项 

Import react {component} from ‘react’

Class TodoList extend component{

          Costructor(props){

                Super(props);

                        This.state={

                                Value=””,

                                List:[]

                        }

                }

        getValue(e){

                Let value=e.target.value;

                This.setState({

                        value

                })

        }

        addValue(){

                This.setState({

                        List:[...this.state.list,this.state.value],

                        Value:””

                })

        }

        deletValue(index){

                Let list=this.state.list.splice(index,1);

                This.setState({

                        List

                })

         }

        Render(){

                Return(

                        <div>

                                <div>

                                        <input

                                                value={this.state.value}

                                                 onChange={this.getValue.bind(this)} />

                                        <button onClick={this.addValue.bind(this)} >提交</button>

                                        </div>

                                <div>

                                {

                                        this.state.list.map((item,index)=>{

                                                Return (<div key={index}  

                                                                onClick={this.deletValue.bind(this,index)}

                                                                >

                                                                        {item}

                                                                </div>

                                                            )

                                        })

                                }

                                </div>

                        </div>

                )

           }

  }

export default TodoList;

 优化部分

Import react {component} from ‘react’
Class TodoList extend component{
  Costructor(props){
    Super(props);
    This.state={
        Value=””,
        List:[]
    }
    This.getValue=this.getValue.bind(this);
    This.addValue=this.addValue.bind(this);
    This.deletValue=this.deletValue.bind(this);
    This.showList=this.showList.bind(this);
    }

    getValue(e){
        Let value=e.target.value;
        This.setState({
            value
        })
    }
    addValue(){
        This.setState({
            List:[...this.state.list,this.state.value],
            Value:””
        })
    }
    deletValue(index){
        Let list=this.state.list.splice(index,1);
        This.setState({
            List
        })
    }
    showList(){
        Return (
            this.state.list.map((item,index)=>{
                Return (    
                            <div key={index}  
                                onClick={()=>this.deletValue(index)}>
                                {item}
                            </div>
                        )
                    })
                )
   }
    Render(){
        Return(
            <div>
                <div>
                    <input 
                        value={this.state.value}
                         onChange={this.getValue} />
                     <button onClick={this.addValue} >提交</button>
                </div>
                <div> 
                {
                    This.showList()
                }
                </div>

            </div>
          )
        }
    }
export default TodoList;

 父子组件传值

Import react {component} from ‘react’;
Import TodoItem from ‘./TodoItem;

    Class TodoList extend component{
          Costructor(props){
            Super(props);
            This.state={
                 Value=””,
                 List:[]
            }
            This.getValue=this.getValue.bind(this);
            This.addValue=this.addValue.bind(this);
            This.deletValue=this.deletValue.bind(this);
         }

        getValue(e){
            Let value=e.target.value;
            This.setState({
                value
            })
        }
        addValue(){
            This.setState({
                List:[...this.state.list,this.state.value],
                Value:””
            })
        }
        deletValue(index){
            Let list=this.state.list.splice(index,1);
                This.setState({
                    List
                })
        }
    Render(){
        Return(
            <div>
                <div>
                    <input 
                            value={this.state.value}
                                 onChange={this.getValue} />
                                <button onClick={this.addValue} >提交</button>
                </div>
                <div> 
                {
                    this.state.list.map((item,index)=>{
                        Return (
                            <TodoItem  
                                content={item}
                                index={index} 
                                deletValue={this.deletValue.bind(this)}/>
                        )
                    })
                }
                </div>
            </div>
        )
    }
}
export default TodoList;

//下面是TodoItem子组件编写

Import react {component} from ‘react’;
    Class TodoItemextend component{
          Costructor(props){
            Super(props);
            This.delete=this.delete.bind(this)
          }
    Delete(){
        Let deletIndex=this.props.index;
        This.props.deletValue(deletIndex)
    }
    Render(){
        Return(<div onclick={this.delete} > {this.Props.content} </div>)
    }
 }
export default TodoItem;