1个状态，2个模态的​​2个不同事件

Question

我想将1状态（打开）传递给所有与不同事件相关的不同模式（3）

if(event1){
 state=true
 return <Component1 open="state">
}
//same code
if(event2){...}
// same code
if(event3){...}

我已经尝试过

在每个组件中创建每个事件 但是当我结合起来

<Component1 />
<Component2 />
<component3 />

只有来自Component1的事件正在起作用，而另一个则没有。 只有当我评论Component1中的事件时，第二个事件才可以工作，而下一个事件可以使用相同的东西

我试图作为道具发送

<Component1 open={this.state.open} />
<Component2 open={this.state.open} />
<component3 open={this.state.open} />

仍然，不是一个好的解决方案，因为激活哪个事件都没有关系，如果我评论来自Component1的事件，则Component1将始终首先打开，第二个将是卑鄙的想法

我试图将开关设置为“返回”，但做出反应时不要让任何状态更改进入“返回”

class Index extends Component {
constructor(props){
super(props);
 this.state = {
  open = false
 }
}

handleClose = () => {
 this.setState({
   open: false
  })
}

handleOpen = () => {
  this.setState({
    open: true
  })
}

render(){
  let event1 = "string";
  let event2 = "string";
  let event3 = "string";
  let receptacleEvent = [];
  document.onkeydown = event => {
  return (
    receptacleEvent.push(event.key)
    if (receptacle.toString().indexOf(event1) >=0){
      this.handleOpen()
      return <Component1 open={this.state.open} close={this.handleClose.bind(this) />
    }
    if (receptacle.toString().indexOf(event2) >=0){
      this.handleOpen()
      return <Component2 open={this.state.open} close={this.handleClose.bind(this) />
    }
    if (receptacle.toString().indexOf(event3) >=0){
      this.handleOpen()
      return <Component3 open={this.state.open} close={this.handleClose.bind(this) />
    }
   )
  }
 }
}

我想我想要这样的东西