React 子向父传参

React 子向父传参

1. 编写 父组件 接收到子组件数据后的处理函数

   函数的参数即为 子组件传入的参数

     addTodo = (newTodo) => {
       let {todos} = this.state
       todos = [newTodo,...todos]
       this.setState({
         todos
       })
     }
   

2. 将处理函数作为props传入子组件

   <Header addTodo={this.addTodo}/>
   

3. 子组件使用处理函数

     handleKeyUp = (e) => {
       const {key} = e
       if(key !== 'Enter') return
       const newTodoValue = this.todoInput.current.value
       this.props.addTodo({
         id:Date.now(),
         name:newTodoValue,
         done:false
       })
     }
   

原理：父组件以props的形式将函数传递给子组件，子组件调用父组件的函数