react 父子组件通信

react父组件传递子组件数据和方法，子组件通过props接收父组件传递给子组件的数据和方法，父组件传递给父组件方法时候要将this进行重新绑定父组件this

下面的例子如下：

父组件：

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

     render ()
     {
          return (<Fragment>
               <div><input
                    value={this.state.inputValue}
                    onChange={
                         e => this.handleInput (e)}
               />
                    <button onClick={
                         e => this.handleClick ()}>提交
                    </button>
               </div>
               <ul>{this.state.list.map ((item,
                                     index) => {
                         return (<TodoItem item = {item}
                                           index={index}//传递给子组件
                                           key={index}
                                           deleteItem = {this.cancel.bind(this)}
                         />)
                    })}
               </ul>

          </Fragment>)
     }

     handleInput (e)
     {
          this.setState ({
               inputValue: e.target.value
          })
     }

     handleClick ()
     {
          let list = [];
          list.push (this.state.inputValue);
          this.setState ({
               list: [...this.state.list,this.state.inputValue],
               inputValue:''
          });
     }
     cancel(index) {
          const list = [...this.state.list];
          list.splice(index,1);
          this.setState({
               list:list
          })
     }
}

export default TodoList
子组件：

import React,{ Component } from 'react';
class TodoItem extends Component{
     render(){
          return (
               <div onClick={() =>this.handleClick()}>{this.props.item}</div> //这里接收父组件传递过来的item
          )
     }
     handleClick() {
          this.props.deleteItem(this.props.index) //这里接收父组件传递过来的方法和index方法，传递的方法要绑定父组件的this
     }
}
export default TodoItem

转载于:https://www.cnblogs.com/zhx119/p/11021945.html