javascript - React 如何将子组件 onClick 链接到父状态

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 组件中的 code> 函数？

Answer 1

看看这个:

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

你可以给 child 一个具有功能的 Prop 。

onClick={this.props.function}