1 सवाल: बटन पर क्लिक करने से काम नहीं होता है - प्रतिक्रिया

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं "मोडल" नामक एक घटक का उपयोग करता हूं जिसे मैं वैश्विक बनाना चाहता हूं ताकि मैं इसे किसी अन्य घटक में उपयोग कर सकूं। मोडल का उपयोग उन सभी घटकों में किया जाएगा जिनकी आवश्यकता है। मेरी समस्या यह है कि अब विजेट {this.props.stateModal} विजेट में काम नहीं करता है और कुछ भी नहीं दिखाता है।

यह मेरी विजेट्स है। 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>
        );
    }
}

मुझे अपने Modal घटक (Modal.js में)

पर काम करने के लिए {this.props.stateModal} की आवश्यकता है

यह मेरा 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 में कुछ करने की आवश्यकता है, लेकिन मुझे नहीं पता कि यह क्या है

संपादित करें: मैंने अन्य सभी मोडल के माता-पिता के रूप में मोडल का उपयोग करने के लिए घटकों को बदल दिया है जो कि मैं उपयोग करना चाहता हूं, जैसे कि मोडलविड्ज। लेकिन अब जब आप Widgts में {this.props.stateModal} के बटन पर क्लिक करते हैं तो काम नहीं करता है।

धन्यवाद!

    
0
  1. आप BkUser का उपयोग कहां करते हैं?
    2019-05-09 05: 38: 46Z
  2. मैं हैडर वर्ग में अपने Header.js फ़ाइल में BkUser का उपयोग करता हूं। बदले में मैं उपयोगकर्ता के राज्य द्वारा एक सशर्त बनाता हूं
    2019-05-09 07: 06: 05Z
  3. क्या आपके पास कोडशेयर पर कोड है? या इसे यहां जोड़ें।
    2019-05-09 07: 11: 15Z
  4. मेरा कोड BKUser यह यहीं है, मेरे कोड कोड में। आपको इसे देखने के लिए स्क्रॉल करना होगा
    2019-05-09 07: 19: 11Z
  5. मैं यह देखना चाहता हूं कि आप इसका उपयोग कैसे करते हैं। <BKUser ... />
    2019-05-09 07: 22: 50Z
    1 उत्तर                              1                         

    आपको अपने stateModal घटक में कहीं 0600350991100100135062 फ़ंक्शन का उपयोग करना होगा। कुछ इस तरह:

    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 (या आप की तरह कुछ भी) के साथ प्रतिस्थापित किया जाना चाहिए।

    संपादित: आपको इस लेख पर एक नज़र डालनी चाहिए 0

    2019-05-08 16: 37: 11Z
    1. धन्यवाद @Pho Huynh लेकिन यह मेरी समस्या नहीं है। मैं स्पष्टीकरण जोड़ने के लिए अपने मूल पाठ को संपादित करता हूं।
      2019-05-09 07: 20: 24Z
      global component
स्रोत रखा गया यहाँ