React学习（一）父子组件通讯

React父子组件之间通讯，利用props和state完成，首先React是单向数据流，父组件可以向子组件传递props；

实现父子组件双向数据流整体的思路是：

1，父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数

2，子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去

图形表示的话：大概长这样

newState通过父组件的回调函数传递回去

下面是我自己写的一个便签实例：

//Note组件代码：

import React,{Component} from 'react';

import { render } from 'react-dom';

class EditPanel extends Component{ //子组件

  constructor(props){

     super(props);

     this.state=this.props.item;//通过props初始化编辑便签子组件的state

     this.handleEditFinish=this.handleEditFinish.bind(this);

  }

  handleEditFinish(e){

    var date=new Date();

    var newState={

      content:e.target.previousSibling.value,

      date:date.toLocaleDateString()

    }

    this.props.onChange(newState);//回调函数传递参数给父组件

  }

  render(){

     return(

         &lt;div className="edit-panel" style={{display:this.props.item.edit?"block":"none"}}&gt;//子组件的显示由父组件控制

           &lt;textarea  cols="30" rows="10" defaultValue={this.state.content} /&gt;

           &lt;a href="#" onClick={this.handleEditFinish}&gt;完成&lt;/a&gt;

         &lt;/div&gt;

       )

  }

}

class Note extends Component{ //父组件

  constructor(props){

     super(props);

     this.state={

          content:this.props.content,

          date:this.props.date,

          edit:false

     }

     this.handleEdit=this.handleEdit.bind(this);

     this.handleDelete=this.handleDelete.bind(this);

     this.handleChildChange=this.handleChildChange.bind(this); //监听子组件变化

  }

  handleChildChange(newState){ //处理子函数传回来的state,改变自身的state

    if(newState){

          this.setState(newState);

          this.setState({

            edit:false

          })

    }

  }

  handleEdit(e){

    e.preventDefault();

    this.setState({

        edit:true,

    })

  }

  handleDelete(e){

    e.preventDefault();

    e.target.parentNode.parentNode.removeChild(e.target.parentNode);

  }

  render() {

      return (&lt;div className="note-item"&gt;

               &lt;p&gt;{this.state.content}&lt;/p&gt;

               &lt;p&gt;{this.state.date}&lt;/p&gt;

               &lt;a href="#" onClick={this.handleEdit}&gt;编辑&lt;/a&gt;

               &lt;a href="#" onClick={this.handleDelete}&gt;删除&lt;/a&gt;

               &lt;EditPanel item={this.state} onChange={this.handleChildChange}/&gt;

             &lt;/div&gt;

           )

  }

}

export default Note;

　　具体工程代码可以看github，需要注意的是this是一定要绑定的！绑定方式有两种，一种是我上面的在构造函数里面绑定一种使用箭头函数:

handleEdit=()=>{[native code...]}

巴特西

React学习（一）父子组件通讯

最新文章

热门文章