Question

我使用了一个希望成为全局组件的组件“ 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

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

点击按钮不起作用-React

1 个答案: