1 Frage: Klicken auf die Schaltfläche funktioniert nicht - Reagieren

Frage erstellt am Wed, May 8, 2019 12:00 AM

Ich verwende eine Komponente namens "Modal", die ich global machen möchte, damit ich sie in jeder anderen Komponente verwenden kann. Modal wird in allen Komponenten verwendet, die es benötigen. Mein Problem ist, dass jetzt der onclick {this.props.stateModal} in Widgets nicht funktioniert und nichts anzeigt.

Dies ist meine 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>
        );
    }
}

Ich benötige {this.props.stateModal}, um an meiner Modal-Komponente (in Modal.js) arbeiten zu können

Dies ist meine Modal.js mit Code für {this.props.stateModal}, funktioniert aber nicht.

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;

Ich denke, dass ich etwas in meiner Modal.js tun muss, aber ich weiß nicht, was es ist

Bearbeiten: Ich habe die Komponenten geändert, um Modal als übergeordnetes Element aller anderen Modal-Elemente zu verwenden, die ich verwenden möchte, z. B. ModalWidgets. Aber jetzt, wenn Sie auf die Schaltfläche {this.props.stateModal} in Widgts klicken, funktioniert nicht.

Danke!

    
0
  1. Wo verwenden Sie BkUser?
    2019-05-09 05: 38: 46Z
  2. Ich verwende BkUser in meiner Header.js-Datei in der Header-Klasse. Bei der Rückgabe mache ich eine Bedingung durch den Zustand des Nutzers
    2019-05-09 07: 06: 05Z
  3. Haben Sie den Code in Codeshare? oder fügen Sie es hier hinzu.
    2019-05-09 07: 11: 15Z
  4. Mein Code BKUser Genau hier, in meinem ersten Codeblock. Sie müssen scrollen, um es zu sehen
    2019-05-09 07: 19: 11Z
  5. Ich möchte sehen, wie Sie es verwenden. <BKUser ... />
    2019-05-09 07: 22: 50Z
1 Antworten                              1                         

Sie müssen die Funktion stateModal irgendwo in Ihrer Modal-Komponente verwenden. So etwas wie:

    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 />;
        }
    }

Die button im obigen Beispiel sollte durch die 0600350991100101035062 des Modals (oder eine beliebige andere Angabe) ersetzt werden.

Bearbeitet: Sie sollten sich diesen Artikel State vs Props . Weil mir auffällt, dass Ihnen die Verwendung nicht klar war. Außerdem glaube ich nicht, dass es so etwas wie backdrop gibt, wie Sie beschrieben haben. Alle Komponenten in react sind wiederverwendbar und können an einer beliebigen Stelle im Projekt importiert werden.

    
0
2019-05-08 16: 37: 11Z
  1. Danke @Pho Huynh, aber das ist nicht mein Problem. Ich bearbeite meinen Originaltext, um Erläuterungen hinzuzufügen.
    2019-05-09 07: 20: 24Z
global component
Quelle platziert Hier