javascript - 使用 prop 回调将参数从子级传递到父级

Question

在这里您可以轻松地看到一种在父级上从子级运行函数的方法

http://andrewhfarmer.com/component-communication/#3-callback-functions

但是你会如何从子函数中传递参数呢？

Answer 1

如果你需要父组件的状态，你必须在传递它之前将他的 this 绑定(bind)到函数。

class Parent extends React.Component {
  callMeMaybe(param) {
    console.log(param)
  }
  render(){
    return (
      <TheChild callMeMaybe={this.callMeMaybe.bind(this)} />
    )
  }
}

class TheChild extends React.Component {
  render(){
    return (
      <div>  
        <button onClick={ event => { 
           this.props.callMeMaybe("message from child") } 
        }>Send a Message to Parent </button>
      </div>
    )
  }
}

这是一个jsfiddle给你玩。单击按钮后检查控制台。