react 子组件给父组件传值

class Parent extends React.Component{
    constructor(){
      super();
      this.state = {
          msg:""
      }
    }
    show(v){
        this.setState({
          msg:v
        })
    }
    render(){
      return(
        <div>
            <Child getMsg = {this.show.bind(this)}/>
            <div>我是父组件=》{this.state.msg}</div>
        </div>
      )
    }
  }
class Child extends React.Component{
  constructor(){
    super();
    this.state = {
        msg:"我是子组件的数据"
    }
  }
  componentWillMount(){
      this.props.getMsg(this.state.msg);
  }
  render(){
    return(
      <div>我是子组件=》{this.state.msg}</div>
    )
  }
}
ReactDOM.render(
    <Parent/>,
    app
);

首先从父组件开始,因为<Child /> 是父子组件通信的桥梁,父组件中<Child fn={this.show.bind(this)}> 父组件给子组件传一个函数show ,show 在父组件定义一下,然后子组件可以通过 this.props.fn();来调用这个函数,从而通过函数来传值。子组件把想要传的数写进f n()中,父组件 show();()中直接接受参数就可以~

阅读更多

没有更多推荐了,返回首页