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;