单击按钮不起作用 - React

Question

我使用了一个名为“Modal”的组件，我想将它设为全局，以便可以在任何其他组件中使用它。 Modal 将用于所有需要它的组件。 我的问题是现在小部件中的 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 组件（在 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。但是现在当你在 Widgts 中点击 {this.props.stateModal} 的按钮时不起作用。

谢谢！

Answer 1

您必须在 Modal 组件中的某处使用 stateModal 函数。比如：

    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 的东西。 react 中的每个组件都是可重用的，可以在项目的任何地方导入。