1 Question: Cliquer sur le bouton ne fonctionne pas - Réagir

question créée à Wed, May 8, 2019 12:00 AM

J'utilise un composant appelé "Modal" que je souhaite rendre global afin de pouvoir l'utiliser dans tout autre composant. Le modal sera utilisé dans tous les composants qui en ont besoin. Mon problème est que maintenant le onclick {this.props.stateModal} dans les widgets ne fonctionne pas et ne montre rien.

Ceci est mon Widgets.js

class Widgets extends Component {    
    render(){
        return (
            <aside className="widgets">
                <div id="bq-datos">
                    <span>Todas tus campañas</span>
                    <a onClick={this.props.stateModal} className="content-datos orange" data-bq-datos="999"><div>Llamadas <span>ENTRANTES</span></div></a>
                    <a className="content-datos violet" data-bq-datos="854"><div>Llamadas <span>SALIENTES</span></div></a>
                </div>
                {
                this.props.isModalOpen
                    ? (

                <Modal                    
                    stateModal = {this.props.stateModal}
                    isModalOpen={this.props.isModalOpen}  >
                    <ModalWidgets/>
                </Modal>
                    )
                    : null
                }
                <Comunicacion/>
            </aside>
        );
    }
}

J'ai besoin de {this.props.stateModal} pour travailler sur mon composant Modal (dans Modal.js)

Ceci est mon Modal.js avec le code pour {this.props.stateModal} mais ne fonctionne pas.

import React, { Component } from 'react';

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalOpen: false,
        };
        this.stateModal = this.stateModal.bind(this);
    }

    stateModal() {
        this.setState({
            isModalOpen: !this.state.isModalOpen
        });
        alert('¡Ohhhh');
    }

    render(){
        if(this.props.isOpen){
            return (

                <div id="modal">
                    {this.props.children}
                    <ModalWidgets/>
                </div>
            );
        } else {
            return null;
        }
    }
}

class ModalWidgets extends Component {
    render(){
        if(this.props.isModalOpen){
            return(
                <article id="md-descansos" className="medium">
                hola tú!!
            </article>
            );
        }
        else{
            return(
                <div>k pasa!</div>
            );
        }
    }
}

export default Modal;

Je pense que j'ai besoin de faire quelque chose dans mon Modal.js mais je ne sais pas ce que c'est

Modifier: J'ai modifié les composants pour utiliser Modal en tant que parent de tous les autres modaux que je souhaite utiliser, tels que ModalWidgets. Mais maintenant, lorsque vous cliquez sur le bouton de {this.props.stateModal} dans Widgts, cela ne fonctionne pas.

Merci!

    
0
  1. où utilisez-vous BkUser?
    2019-05-09 05: 38: 46Z
  2. J'utilise BkUser dans mon fichier Header.js de la classe Header. Dans le retour je fais une condition par l'état de l'utilisateur
    2019-05-09 07: 06: 05Z
  3. avez-vous le code en partage de code? ou l'ajouter ici.
    2019-05-09 07: 11: 15Z
  4. Mon code BKUser C'est ici, dans mon premier bloc de code. Vous devez faire défiler pour le voir
    2019-05-09 07: 19: 11Z
  5. Je veux voir comment vous l'utilisez. <BKUser ... />
    2019-05-09 07: 22: 50Z
1 Réponses                              1                         

Vous devez utiliser la fonction stateModal quelque part dans votre composant Modal. Quelque chose comme:

    render(){
        if(this.props.isOpen){
            return (

            <ModalGenerico>
                <div id="modal">
                  <button type="button" onClick={this.stateModal}>Click here</button>
                  {this.props.children}
                </div>
            </ModalGenerico>
            );
        } else {
            return <ModalGenerico />;
        }
    }

Le 0600350991111101035062 de l'exemple ci-dessus doit être remplacé par votre button du modal (ou de tout autre élément de votre choix).

Modifié: vous devriez consulter cet article État contre accessoires . Parce que j'ai remarqué que vous n'étiez pas au courant de leur utilisation. En outre, je ne pense pas qu'il existe une telle chose appelée backdrop telle que vous l'avez décrite. Tous les composants de Rea sont réutilisables et peuvent être importés n’importe où dans le projet.

    
0
2019-05-08 16: 37: 11Z
  1. Merci @Pho Huynh mais ce n'est pas mon problème. Je modifie mon texte d'origine pour ajouter des explications.
    2019-05-09 07: 20: 24Z
global component
source placée ici