1 Pregunta: Hacer clic en el botón no funciona - Reaccionar

pregunta creada en Wed, May 8, 2019 12:00 AM

Uso un componente llamado "Modal" que quiero hacer global para poder usarlo en cualquier otro componente. Modal será utilizado en todos los componentes que lo necesiten. Mi problema es que ahora el onclick {this.props.stateModal} en Widgets no funciona y no muestra nada.

Este es mi 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>
        );
    }
}

Necesito {this.props.stateModal} para trabajar en mi componente modal (en Modal.js)

Este es mi Modal.js con código para {this.props.stateModal} pero no funciona.

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;

Creo que necesito hacer algo en mi Modal.js pero no sé qué es

Editar: He cambiado los componentes para usar Modal como padre de todos los demás Modal que quiero usar, como ModalWidgets. Pero ahora, al hacer clic en el botón de {this.props.stateModal} en Widgts no funciona.

¡Gracias!

    
0
  1. ¿dónde usas BkUser?
    2019-05-09 05: 38: 46Z
  2. Utilizo BkUser en mi archivo Header.js en la clase Header. En la devolución hago un condicional por el estado del usuario
    2019-05-09 07: 06: 05Z
  3. ¿tienes el código en el código compartido? o agregarlo aquí.
    2019-05-09 07: 11: 15Z
  4. Mi código BKUser Está aquí, en mi primer bloque de código. Tienes que desplazarte para verlo
    2019-05-09 07: 19: 11Z
  5. Quiero ver cómo lo usas. <BKUser ... />
    2019-05-09 07: 22: 50Z
1 Respuestas                              1                         

Debe usar la función stateModal en algún lugar de su componente Modal. Algo como:

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

El button en el ejemplo anterior debe reemplazarse con su backdrop del modal (o cualquier otra cosa que desee).

Editado: debe echar un vistazo a este artículo State vs Props . Porque noto que no estabas claro el uso de ellos. Además, no creo que haya tal cosa llamada global component como usted describió. Todos los componentes en reaccion son reutilizables y se pueden importar a cualquier parte del proyecto.

    
0
2019-05-08 16: 37: 11Z
  1. Gracias @Pho Huynh pero no es mi problema. Edito mi texto original para agregar explicaciones.
    2019-05-09 07: 20: 24Z
fuente colocada aquí