Javascript React JS-带有函数回调的确认对话框

以下是我尝试过的，以及我想要实现的细节，有人可以帮助我

class ConfirmDialog扩展了React.Component{
回调（操作）{
警报（行动）
}
render（）{
返回(
确认对话框
this.callback（'yes'）}>yes
this.callback（'no'）}>no
)
}
}
类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showDialog:false，
}
}
onButtonClick（参数）{
//我希望在不失去以前参数的情况下，在这里进行是非回调
//因此，我可以在这里使用开关盒进行是/否操作。
this.setState（{showDialog:！this.state.showDialog}）
}
render（）{
返回(
this.onButtonClick（{test:'test params'}）}>
点击
{
这个.state.showDialog？
：null
}
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
对话框{
背景：番茄；
宽度：150px；
高度：150像素；
保证金：自动；
}
.对话框按钮{
显示：内联块；
文本对齐：居中；
利润率：0.10px；
}
您必须使用通过组件道具传递的回调函数：

<button onClick={() => this.props.callback('yes')}>Yes</button>
<button onClick={() => this.props.callback('no')}>No</button>

this.props.callback（'yes'）}>yes
this.props.callback（'no'）}>no
您可以在ConfirmDialog组件的道具中添加一个函数

<ConfirmDialog callback={this.onSelection}/>

现在，您的值位于
onSelection
函数中


class ConfirmDialog扩展了React.Component{
回调（操作）{
this.props.callback（action）；
}
render（）{
返回(
确认对话框
this.callback（'yes'）}>yes
this.callback（'no'）}>no
)
}
}
类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showDialog:false，
}
}
选举（价值）{
console.log（“我的对话框值为：”，value）；//值包含“是”或“否”
//将值设置为state或在此处使用
}
onButtonClick（参数）{
this.setState（{showDialog:！this.state.showDialog}）
}
render（）{
返回(
this.onButton单击（{test:'test params'}）}>单击
{
这个.state.showDialog？
: 
无效的
}
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
对话框{
背景：番茄；
宽度：150px；
高度：150像素；
保证金：自动；
}
.对话框按钮{
显示：内联块；
文本对齐：居中；
利润率：0.10px；
}
您没有将道具正确地传递给配置组件。您需要使用类
构造函数
并在道具上调用
super

class ConfirmDialog extends React.Component {
  constructor(props) {
    super(props)
  }
  callback(action){
    alert(action)
  }

  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.props.callback('yes')}>Yes</button>
        <button onClick={() => this.props.callback('no')}>No</button>
      </div>
    )
  }
}

class ConfirmDialog扩展了React.Component{
建造师（道具）{
超级（道具）
}
回调（操作）{
警报（行动）
}
render（）{
返回(
确认对话框
this.props.callback（'yes'）}>yes
this.props.callback（'no'）}>no
)
}
}

现在，在您的Hello组件中，您可以使用回调的值

class Hello extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      showDialog: false,
    }
  }

  onButtonClick(yesOrNo) {
    //I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
    console.log(yesOrNo)
    this.setState({showDialog: !this.state.showDialog})
  }

  render() {
    return (
    <div>
    <button onClick={() => this.onButtonClick({test: 'test params'})}>
        Click</button>
     {
       this.state.showDialog ? 
      <ConfirmDialog callback={this.onButtonClick.bind(this)}/> : null
     }
    </div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showDialog:false，
}
}
onButtonClick（是或否）{
//我希望在不失去以前参数的情况下，在这里进行是非回调
//因此，我可以在这里使用开关盒进行是/否操作。
console.log（yesOrNo）
this.setState（{showDialog:！this.state.showDialog}）
}
render（）{
返回(
this.onButtonClick（{test:'test params'}）}>
点击
{
这个.state.showDialog？
：null
}
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

下面是一个工作示例
为了更好地管理react代码，请在代码中合并PropTypes。

添加回调类型：

    ConfirmDialog.propTypes = {
       yesCallback: PropTypes.func,
       noCallback: PropTypes.func
    };

在确认对话框组件中使用回调

 <button onClick={() => this.props.yesCallback("Yes")}>Yes</button>
 <button onClick={() => this.props.noCallback("No")}>No</button>

this.props.yescalback（“Yes”）}>Yes
this.props.noCallback（“No”）}>No

从父组件传递道具

<ConfirmDialog
            yesCallback={message => {
              alert(message);
            }}
            noCallback={message => {
              alert(message);
            }}
/>

{
警报（信息）；
}}
noCallback={message=>{
警报（信息）；
}}
/>
检查我添加的答案和工作示例：我希望在onButtonClick函数上回调而不丢失我以前的参数，即{test:'test params'}，检查我的onClickButton我在questionHello（'Hi'，（action）=>{alert（action}）。函数Hello（msg，callbak）{callback（'yes'）。像这样我想要实现的
<ConfirmDialog
            yesCallback={message => {
              alert(message);
            }}
            noCallback={message => {
              alert(message);
            }}
/>