Нажатие на кнопку не работает - реагирует - PullRequest
Новая
       13

Нажатие на кнопку не работает - реагирует

0 голосов
/ 08 мая 2019

Я использую компонент под названием «Модальный», который хочу сделать глобальным, чтобы я мог использовать его в любом другом компоненте. Модал будет использоваться во всех компонентах, которые в этом нуждаются. Моя проблема в том, что теперь onclick {this.props.stateModal} в виджетах не работает и ничего не показывает.

Это мой 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>
        );
    }
}

Мне нужно {this.props.stateModal} для работы с моим модальным компонентом (в Modal.js)

Это мой Modal.js с кодом для {this.props.stateModal}, но не работает. 

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;

Я думаю, что мне нужно что-то сделать в моем Modal.js, но я не знаю, что это такое

Изменить: Я изменил компоненты, чтобы использовать Modal в качестве родителя для всех других модальных устройств, которые я хочу использовать, таких как ModalWidgets. Но теперь при нажатии на кнопку {this.props.stateModal} в Widgts не работает.

Спасибо!

1 Ответ

0 голосов
/ 08 мая 2019

Вы должны использовать функцию stateModal где-нибудь в вашем Modal компоненте. Что-то вроде: 

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

button в приведенном выше примере следует заменить на backdrop модального (или чего-либо еще, как вам нравится).

Отредактировано: Вы должны взглянуть на эту статью Состояние против реквизита . Потому что я замечаю, что вы не поняли, как их использовать. Кроме того, я не думаю, что есть такая вещь, как global component, как вы описали. Все компоненты в реакции могут использоваться повторно и могут быть импортированы в любое место проекта.

...