1 Câu hỏi: Nhấp vào nút không hoạt động - Phản ứng

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi sử dụng một thành phần gọi là "Phương thức" mà tôi muốn tạo toàn cầu để tôi có thể sử dụng nó trong bất kỳ thành phần nào khác. Phương thức sẽ được sử dụng trong tất cả các thành phần cần nó. Vấn đề của tôi là bây giờ onclick {this.props.stateModal} trong Widgets không hoạt động và không hiển thị gì cả.

Đây là Widgets.js của tôi

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

Tôi cần {this.props.stateModal} để hoạt động trên thành phần Modal của tôi (trong Modal.js)

Đây là Modal.js của tôi có mã cho {this.props.stateModal} nhưng không hoạt động.

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;

Tôi nghĩ rằng tôi cần làm gì đó trong Modal.js của mình nhưng tôi không biết đó là gì

Chỉnh sửa: Tôi đã thay đổi các thành phần để sử dụng Modal làm cha mẹ của tất cả các Modal khác mà tôi muốn sử dụng, chẳng hạn như ModalWidgets. Nhưng bây giờ khi bạn nhấp vào nút của {this.props.stateModal} trong Widgts không hoạt động.

Cảm ơn!

    
0
  1. bạn sử dụng BkUser ở đâu?
    2019-05-09 05: 38: 46Z
  2. Tôi sử dụng BkUser trong tệp Header.js của mình trong lớp Header. Đổi lại tôi tạo điều kiện theo trạng thái của người dùng
    2019-05-09 07: 06: 05Z
  3. bạn có mã trên codeshare không? hoặc thêm nó vào đây.
    2019-05-09 07: 11: 15Z
  4. Mã BKUser của tôi Nó ở ngay đây, trong khối mã đầu tiên của tôi. Bạn phải cuộn để xem nó
    2019-05-09 07: 19: 11Z
  5. Tôi muốn xem cách bạn sử dụng nó. <BKUser ... />
    2019-05-09 07: 22: 50Z
1 Câu trả lời                              1                         

Bạn phải sử dụng chức năng stateModal ở đâu đó trong thành phần Modal của bạn. Một cái gì đó như:

    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 trong ví dụ trên nên được thay thế bằng backdrop của phương thức (hoặc bất cứ điều gì khác bạn muốn).

Đã chỉnh sửa: Bạn nên xem bài viết này Bang vs Đạo cụ . Bởi vì tôi nhận thấy rằng bạn không rõ ràng về việc sử dụng chúng. Ngoài ra, tôi không nghĩ có thứ gọi là global component như bạn mô tả. Mọi thành phần trong phản ứng đều có thể tái sử dụng và có thể được nhập vào bất cứ đâu trong dự án.

    
0
2019-05-08 16: 37: 11Z
  1. Cảm ơn @Pho Huynh nhưng đó không phải là vấn đề của tôi. Tôi chỉnh sửa văn bản gốc của mình để thêm giải thích.
    2019-05-09 07: 20: 24Z
nguồn đặt đây