1
votes

React JS - boîte de dialogue de confirmation avec rappel de fonction

Voici ce que j'ai essayé, et détaille ce que je veux accomplir, quelqu'un peut-il m'aider.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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 component. -->
</div>

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

}

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

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

La fonction de rappel doit obtenir l'action sur laquelle j'ai cliqué et sans perdre les paramètres. React JS - boîte de dialogue de confirmation avec rappel de fonction avec l'action sans perdre le paramètre précédent

javascript reactjs

1 commentaires

Vérifiez ma réponse que j'ai ajoutée et un exemple de travail: codesandbox.io/s/r09z191w3p

4 Réponses :

0
votes

Vous devez utiliser la fonction de rappel passée par les accessoires des composants:

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

0 commentaires

0
votes

Vous pouvez ajouter une fonction dans les accessoires de votre composant ConfirmDialog

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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 component. -->
</div>

et l'appeler lorsque vous cliquez sur le bouton "oui" ou "non"

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

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

1 commentaires

Je veux un rappel sur la fonction Button Click sans relâcher mes paramètres précédents ie {test: 'test params'}, vérifier mon bouton onClick J'ai ajouté un commentaire en question

2
votes

Vous ne transmettez pas correctement les accessoires au ConfigComponent . Vous devez utiliser la classe constructeur et appeler super sur les accessoires.

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

Et maintenant dans votre Hello strong > composant sur lequel vous pouvez travailler avec la valeur du rappel

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

Voici un exemple de travail https://codesandbox.io/s/r09z191w3p

0 commentaires

0
votes

Afin de mieux gérer votre code de réaction, intégrez des PropTypes dans votre code. https://www.npmjs.com/package/prop-types

Ajouter un type pour le rappel:

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

Utilisez le rappel dans votre composant de dialogue de confirmation

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

Transmettre les accessoires des composants parents

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

1 commentaires

Hello ('Hi', (action) => {alert (action}). Function Hello (msg, callback) {callback ('yes')}. Comme ça je veux réaliser