1 Soalan: Mengklik butang tidak berfungsi - Beraksi

soalan dicipta di Wed, May 8, 2019 12:00 AM

Saya menggunakan komponen yang dipanggil "Modal" yang saya ingin buat global supaya saya dapat menggunakannya dalam sebarang komponen lain. Modal akan digunakan dalam semua komponen yang memerlukannya. Masalah saya ialah sekarang onclick {this.props.stateModal} dalam Widget tidak berfungsi dan tidak menunjukkan apa-apa.

Ini adalah Widgets.js saya

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

Saya perlukan {this.props.stateModal} untuk berfungsi pada komponen Modal saya (dalam Modal.js)

Ini Modal.js saya dengan kod untuk {this.props.stateModal} tetapi tidak berfungsi.

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;

Saya fikir saya perlu melakukan sesuatu di Modal.j saya tetapi saya tidak tahu apa itu

Edit: Saya telah menukar komponen untuk menggunakan Modal sebagai ibu bapa dari semua Modal lain yang saya ingin gunakan, seperti ModalWidgets. Tetapi sekarang apabila anda klik pada butang {this.props.stateModal} dalam Widgts tidak berfungsi.

Terima kasih!

    
0
  1. di mana anda menggunakan BkUser?
    2019-05-09 05: 38: 46Z
  2. Saya menggunakan BkUser dalam fail Header.js saya dalam kelas Header. Sekembalinya saya membuat syarat bersyarat oleh pengguna
    2019-05-09 07: 06: 05Z
  3. adakah anda mempunyai kod pada codeshare? atau tambahkan di sini.
    2019-05-09 07: 11: 15Z
  4. Kod saya BKUser Ia di sini, dalam blok kod pertama saya. Anda perlu tatal untuk melihatnya
    2019-05-09 07: 19: 11Z
  5. Saya mahu melihat cara anda menggunakannya. <BKUser ... />
    2019-05-09 07: 22: 50Z
1 Jawapan                              1                         

Anda perlu menggunakan fungsi stateModal di suatu tempat di komponen Modal anda. Sesuatu seperti:

    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 dalam contoh di atas hendaklah digantikan dengan backdrop daripada modal (atau apa pun yang anda suka).

Diedit: Anda harus melihat artikel ini Negeri vs Props . Kerana saya perhatikan bahawa anda tidak jelas penggunaannya. Selain itu, saya tidak fikir ada perkara yang dipanggil global component seperti yang anda nyatakan. Setiap komponen dalam tindak balas boleh digunakan semula dan boleh diimport di mana sahaja dalam projek.

    
0
2019-05-08 16: 37: 11Z
  1. Terima kasih @Pho Huynh tetapi bukan masalah saya. Saya mengedit teks asal saya untuk menambah penjelasan.
    2019-05-09 07: 20: 24Z
sumber diletakkan di sini