我发现以下工作解决方案将onClick函数参数从child传递给父组件：

的
传递方法的版本（）
</强>

    
      //ChildB component
class ChildB extends React.Component {
render() {
    var handleToUpdate  =   this.props.handleToUpdate;
    return (<div><button onClick={() => handleToUpdate('someVar')}>
        Push me
      </button>
    </div>)
}
}
//ParentA component
class ParentA extends React.Component {
constructor(props) {
    super(props);
    var handleToUpdate  = this.handleToUpdate.bind(this);
    var arg1 = '';
}
handleToUpdate(someArg){
        alert('We pass argument from Child to Parent: ' + someArg);
        this.setState({arg1:someArg});
}
render() {
    var handleToUpdate  =   this.handleToUpdate;
    return (<div>
                <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
}
}
if(document.querySelector(“#demo”)){
    ReactDOM.render(
        ,
        document.querySelector(“#demo”)
    );
}
</code>
  

    
      //ChildB component
class ChildB extends React.Component {
render() {
    var handleToUpdate  =   this.props.handleToUpdate;
    return (<div>
      <button onClick={() => handleToUpdate('someVar')}>
        Push me
      </button>
    </div>)
}
}
//ParentA component
class ParentA extends React.Component {
    constructor(props) {
        super(props);
    }
handleToUpdate = (someArg) => {
        alert('We pass argument from Child to Parent: ' + someArg);
}
render() {
    return (<div>
        <ChildB handleToUpdate = {this.handleToUpdate} /></div>)
}
}
if(document.querySelector(“#demo”)){
    ReactDOM.render(
        ,
        document.querySelector(“#demo”)
    );
}
</code>
  

我喜欢传递函数的答案，这是一种非常方便的技巧。

另一方面，您也可以使用pub / sub或使用变体，调度程序来实现此目的

助焊剂

确实。理论超级简单，有组件5发送组件3正在监听的消息。组件3然后更新其触发重新渲染的状态。这需要有状态的组件，这取决于您的观点，可能是也可能不是反模式。我个人反对他们，并且宁愿其他东西正在监听调度和更改状态从上到下（Redux这样做，但增加了额外的术语）。

    
      import { Dispatcher } from flux
import { Component } from React
const dispatcher = new Dispatcher()
// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
  state = {
    text: ‘foo’
  } 
  componentDidMount() {
    dispatcher.register( dispatch => {
      if ( dispatch.type === ‘change’ ) {
        this.setState({ text: ‘bar’ })
      }
    }
  }
  render() {
    return 
{ this.state.text }

  }
}
// Click handler
const onClick = event => {
  dispatcher.dispatch({
    type: ‘change’
  })
}
// Component 5 in your example
const StatelessChild = props => {
  return Click me
}
</code>
  

我找到了以下工作解决方案，通过param将onClick函数参数从child传递给父组件：

父类：

    
      class Parent extends React.Component {
constructor(props) {
    super(props)
// Bind the this context to the handler function
this.handler = this.handler.bind(this);
// Set some state
this.state = {
    messageShown: false
};
}
// This method will be sent to the child component
handler(param1) {
console.log(param1);
    this.setState({
        messageShown: true
    });
}
// Render the child component and set the action property with the handler as value
render() {
    return 
}}
</code>
  

    
      class Child extends React.Component {
render() {
    return (
        

            {/ The button will execute the handler function set by the parent component /}
            
        

    )
} }
</code>
  

当你需要在任何级别的孩子与父母之间进行交流时，最好是利用它
的
上下文
</强>
。在父组件中定义子项可以调用的上下文，例如

    
           static childContextTypes = {
            parentMethod: React.PropTypes.func.isRequired
          };
       getChildContext() {
        return {
          parentMethod: (parameter_from_child) => this.parentMethod(parameter_from_child)
        };
      }
parentMethod(parameter_from_child){
// update the state with parameter_from_child
}
</code>
  

    
       static contextTypes = {
       parentMethod: React.PropTypes.func.isRequired
     };
render(){
    return(
      this.context.parentMethod(new_state_value)}
         underlayColor=’gray’ >
        <Text> update state in parent component </Text>
  </TouchableHighlight>
)}
</code>
  

我想感谢最热烈的回答，让我了解自己的问题基本上是箭头函数的变化和从子组件传递param：

    
       class Parent extends React.Component {
  constructor(props) {
    super(props)
    // without bind, replaced by arrow func below
  }
  handler = (val) => {
    this.setState({
      someVar: val
    })
  }
  render() {
    return 
  }
}
class Child extends React.Component {
  render() {
    return  this.props.handler(‘the passing value’)}/ >
  }
}
</code>
  

 - 我们可以创建ParentComponent并使用handleInputChange方法来更新ParentComponent状态。导入ChildComponent，我们将两个道具从父组件传递给子组件ie.handleInputChange函数和计数。

    
      import React, { Component } from ‘react’;
import ChildComponent from ‘./ChildComponent’;
class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      count: ‘’,
    };
  }
  handleInputChange(e) {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  }
  render() {
    const { count } = this.state;
    return (
      
    );
  }
}
</code>