1 سؤال: النقر فوق الزر لا يعمل - رد فعل

السؤال الذي تم إنشاؤه في Wed, May 8, 2019 12:00 AM

أستخدم مكونًا يسمى "Modal" أرغب في جعله عالميًا حتى أتمكن من استخدامه في أي مكون آخر. سيتم استخدام الوسائط في جميع المكونات التي تحتاجها. مشكلتي هي أن onclick {this.props.stateModal} في Widgets لا يعمل ولا يظهر أي شيء.

هذا هو 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 الخاص بي (في 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 باعتباره الأصل لكل Modal الأخرى التي أريد استخدامها ، مثل ModalWidgets. لكن الآن عند النقر على زر {this.props.stateModal} في Widgts لا يعمل.

وشكرا!

    
0
  1. أين تستخدم BkUser؟
    2019-05-09 05: 38: 46Z
    لى>
  2. يمكنني استخدام BkUser في ملف Header.js في فئة Header. في المقابل ، أصبح شرطًا بحالة المستخدم
    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 في مكان ما في مكون 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 الخاص بك من الوسائط (أو أي شيء آخر تريده).

تم التعديل: يجب إلقاء نظرة على هذه المقالة State vs Props . لأنني لاحظت أنك لم تكن واضحة في استخدامها. إضافة إلى ذلك ، لا أعتقد أن هناك ما يسمى global component كما وصفته. كل المكونات المتفاعلة قابلة لإعادة الاستخدام ويمكن استيرادها في أي مكان في المشروع.

    
0
2019-05-08 16: 37: 11Z
  1. شكرًا علىPho Huynh ، لكنها ليست مشكلتي. أقوم بتعديل النص الأصلي لإضافة توضيحات.
    2019-05-09 07: 20: 24Z
    لى>
وضع مصدر هنا