Question

我正在创建一个Modal组件，在高级别上，它看起来像这样：

class Modal extends Component {
    hideModal() {
        /* logic to hide modal */
    }       

    render() {
        return (
            <section role="dialog" ... >
                <div className="modal-inner">
                    <header className="react-modal-header">{this.props.title}</header>
                    <div className="react-modal-body">{this.props.body}</div>
                    <footer className="react-modal-footer">{this.props.footer}</footer>
                </div>
            </section>
        );
    }
}

我想为这个组件的使用者提供一种方法来指定一个关闭模态的按钮。我正在考虑将这个按钮放在它自己的组件中，如下所示：

class ModalCloseButton extends Component {
    render() {
        return (
            <button type="button" onClick={/* call hideModal in Modal component */}>
                {this.props.text}
            </button>
        );
    }
}

Modal组件和ModalCloseButton组件将以这种方式使用：

<Modal
    title="my awesome modal"
    body="this is the body of my awesome component"
    footer={
        <ModalCloseButton text="Close modal!"/>
    } 
/>

如何链接Modal和ModalCloseButton组件，以便按钮组件中的onClick处理程序触发hideModal组件中的Modal函数？

Answer 1

看看这个：

https://codepen.io/JanickFischr/pen/JLRovb

你可以给孩子一个有功能的道具。

onClick={this.props.function}

Answer 2

在父级内添加构造函数：

constructor(props) {
  super(props)
  this.hideModal = this.hideModal.bind(this)
}

然后将它传递给你的孩子：

<ModalCloseButton hideModal={this.hideModal} />

然后在你的孩子中你可以称之为：

<button onClick={() => this.props.hideModal()}>click me</button>

Answer 3

您可以将回调函数传递给模态组件，然后将该回调传递给buttonClose组件。当onClick时，您执行该回调，并从父

接收事件

Answer 4

在模态组件中，您可以使用React.cloneElement扩展传递的Button元素，并使用hideModal方法的附加道具保持参考：

class Modal extends Component {
    hideModal() {
        /* logic to hide modal */
    }       

    render() {
        const ButtonWithHide = React.cloneElement(this.props.footer, { hide: this.hideModal.bind(this)}));;
        return (
            <section role="dialog" ... >
                <div className="modal-inner">
                    <header className="react-modal-header">{this.props.title}</header>
                    <div className="react-modal-body">{this.props.body}</div>
                    <footer className="react-modal-footer">
                         <ButtonWithClose />
                    </footer>
                </div>
            </section>
        );
    }
}

并在Button组件中将传递的方法作为onClick处理程序：

class ModalCloseButton extends Component {
    render() {
        return (
            <button type="button" onClick={this.props.hide}>
                {this.props.text}
            </button>
        );
    }
}

Answer 5

在模态中添加状态变量（hide = true）并根据该模态设置该模态的可见性。创建一个方法hideModal（），切换到Modal组件中的状态变量，然后将此方法作为道具传递给ModalCloseButton组件，并在ModalCloseButton组件中调用onClick按钮。

class Modal extends Component { 构造（道具）{ 超（道具） this.state = { 隐藏：真实， } hideModal（）{ this.setState（{ 隐藏：假的， }） }
render（）{ 回来（ {} this.props.title {} this.props.body {} this.props.footer {this.hideModal（）}} /＆GT; ）; } } 类ModalCloseButton扩展Component { render（）{ 回来（ {} this.props.text ）; } }

确定如何将子组件onClick链接到父状态

5 个答案: