Reactjs 从单击组件B更改组件A的状态

我想从位于组件B中的按钮的onClick处理程序更改组件A的状态，目前我的代码如下：

组件A:

     import React, { Component } from 'react'
     import ComponentB from './component_b'
     class ComponentA extends Component{
      constructor(props){
       super(props);
        this.state=({
             allergies11:'',
             allergies12:'',
             allergies13:'',
             allergies14:''
        })
       this.onCCDSubmit = this.onCCDSubmit.bind(this);
      }
      onCCDSubmit(e){
       e.preventDefault()
       this.setState({
            allergies11:'Penicillin',
            allergies12:'2/13/10',
            allergies13:'Hives',
            allergies14:'moderate'
       })
       this.on
      }
      render(){
       return(
       <div>{this.state.allergies11}  {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
       <ComponentB />
       <div>
       )
      }
    }
    export default ComponentA;

import React, { Component } from 'react';
class ComponentB extends Component{
 render(){
  return(
  <button type="button" onClick={this.onCCDSubmit}>Import</button>
  )
 }
}
export default ComponentB;

import React，{Component}来自“React”
从“./component\u b”导入组件b
类ComponentA扩展了组件{
建造师（道具）{
超级（道具）；
这个州=({
过敏11:“”，
过敏12:“”，
过敏13:“”，
过敏14:'
})
this.onccdprimit=this.onccdprimit.bind（this）；
}
提交（e）{
e、 预防默认值（）
这是我的国家({
过敏11:‘青霉素’，
过敏12:‘2/13/10’，
过敏13:‘荨麻疹’，
过敏14:“中度”
})
这是我的
}
render（）{
返回(
{this.state.allergies11}{this.state.allergies12}{this.state.allergies13}{this.state.allergies14}
)
}
}
导出默认组件a；

组件B:

     import React, { Component } from 'react'
     import ComponentB from './component_b'
     class ComponentA extends Component{
      constructor(props){
       super(props);
        this.state=({
             allergies11:'',
             allergies12:'',
             allergies13:'',
             allergies14:''
        })
       this.onCCDSubmit = this.onCCDSubmit.bind(this);
      }
      onCCDSubmit(e){
       e.preventDefault()
       this.setState({
            allergies11:'Penicillin',
            allergies12:'2/13/10',
            allergies13:'Hives',
            allergies14:'moderate'
       })
       this.on
      }
      render(){
       return(
       <div>{this.state.allergies11}  {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
       <ComponentB />
       <div>
       )
      }
    }
    export default ComponentA;

import React, { Component } from 'react';
class ComponentB extends Component{
 render(){
  return(
  <button type="button" onClick={this.onCCDSubmit}>Import</button>
  )
 }
}
export default ComponentB;

import React，{Component}来自'React'；
类ComponentB扩展了组件{
render（）{
返回(
进口
)
}
}
导出默认组件B；

---

我怎样才能做到这一点，欢迎任何帮助

您可以将回调传递给组件B，这将在单击时触发回调

B部分：

import React, { Component } from 'react';
class ComponentB extends Component{
 render(){
  return(
    <button type="button" onClick={this.props.clickHandler}>Import</button>
  )
 }
}
export default ComponentB;

import React，{Component}来自'React'；
类ComponentB扩展了组件{
render（）{
返回(
进口
)
}
}
导出默认组件B；

A部分：

 import React, { Component } from 'react'
 import ComponentB from './component_b'
 class ComponentA extends Component{
  constructor() {
    super();
    this.handleClickB = this.handleClickB.bind(this);
  }

  handleClickB(e) {
    e.stopPropagation();
    this.setState({
      // new state you want to set...
    });
  }

  render(){
   return(
   <div>{this.state.allergies11}  {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
   <ComponentB clickHandler={this.handleClickB} />
   <div>
   )
  }
}
export default ComponentA;

import React，{Component}来自“React”
从“./component\u b”导入组件b
类ComponentA扩展了组件{
构造函数（）{
超级（）；
this.handleClickB=this.handleClickB.bind（this）；
}
handleClickB（e）{
e、 停止传播（）；
这是我的国家({
//要设置的新状态。。。
});
}
render（）{
返回(
{this.state.allergies11}{this.state.allergies12}{this.state.allergies13}{this.state.allergies14}
)
}
}
导出默认组件a；

感谢您的快速响应！效果不错！再次感谢！