javascript - React JS - confirmation dialog with function callback - Stack Overflow

admin管理员组

文章数量:1391943

Here is what I tried, and details what I want to achieve, can someone help.

class ConfirmDialog extends React.Component {
  callback(action){
  	alert(action)
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	  showDialog: false,
    }
  }
  
  onButtonClick(params) {
	//I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
  	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}/> : null
     }
	</div>    
    )
  }
}

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

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto; 

}

.dialog button {
  display : inline-block;
  text-align: center;
  margin: 0 10px; 
}

<script src=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your ponent. -->
</div>

Here is what I tried, and details what I want to achieve, can someone help.

class ConfirmDialog extends React.Component {
  callback(action){
  	alert(action)
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	  showDialog: false,
    }
  }
  
  onButtonClick(params) {
	//I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
  	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}/> : null
     }
	</div>    
    )
  }
}

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

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto; 

}

.dialog button {
  display : inline-block;
  text-align: center;
  margin: 0 10px; 
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your ponent. -->
</div>

The on callback function should get which action I clicked and without losing the parameters. React JS - confirmation dialog with function callback with the action without loosing the previous parameter

• javascript
• reactjs

Share Improve this question Follow asked Jan 22, 2019 at 14:34 Mahendra KulkarniMahendra Kulkarni 1,51733 gold badges2626 silver badges3737 bronze badges 2

• Check my answer I added and working sample: codesandbox.io/s/r09z191w3p – Nedko Dimitrov Commented Jan 22, 2019 at 15:03
• Here you were missing to call props function, instead you called local function. <button onClick={() => this.callback('yes')}>Yes</button> <button onClick={() => this.callback('no')}>No</button> – Mahendra Kulkarni Commented Jul 23, 2021 at 14:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You're not passing the props correctly to the ConfigComponent. You Need to use the class constructor and call super on the props.

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>
    )
  }
}

And now in your Hello ponent you can work with the value of the callback

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')
);

Here is working example https://codesandbox.io/s/r09z191w3p

You have to use the callback function passed through the ponents props:

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

You can add a function in the props of your ConfirmDialog ponent

<ConfirmDialog callback={this.onSelection}/>

and call it when the "yes" or "no" button is clicked

this.props.callback(action);

You now have your value inside the onSelection function.

class ConfirmDialog extends React.Component {
  callback(action){
  	this.props.callback(action);
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	    showDialog: false,
    }
  }
  
  onSelection(value) {
    console.log("My dialog value is :", value); //Value contains "yes" or "no"
    //set value to state or use it here
  }
  
  onButtonClick(params) {
  	this.setState({showDialog: !this.state.showDialog})
  }
  
  render() {
    return (
      <div>
        <button onClick={() => this.onButtonClick({test: 'test params'})}>Click</button>
         {
            this.state.showDialog ? 
              <ConfirmDialog callback={this.onSelection}/> 
            : 
              null
         }
      </div>    
    )
  }
}

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

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto;
}

.dialog button {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your ponent. -->
</div>

In order to better manage your react code, incorporate PropTypes in your code. https://www.npmjs./package/prop-types

Add a types for callback:

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

Use the callback in your Confirm Dialog Component

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

Pass props from parent ponents

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

本文标签： javascriptReact JSconfirmation dialog with function callbackStack Overflow