如何在 React DOM 中显示模态框？

Question

我在 DOM 中显示模态框时遇到问题，我有 3 个组件：Navbar 和 Modal 作为子项，Shopping 作为父项，我在购物时调用 Modal 和 Navbar，我想在以下时间显示模态框我在导航栏上点击了一个跨度，它不能正常工作，你能帮帮我吗？购物鳕鱼是：

class Shopping extends React.Component {
state = {
    products: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
    },
           addCounter: 0,
    purchased: false,
}

addProductHandler = (id, title, price) => {
    // Count
    const prevCount = this.state.addCounter
    const updatedCount = prevCount + 1
    this.setState({ totalPrice: newPrice, addCounter: updatedCount })
}

showModalHandler = () => {
    this.setState({ purchased: true })
}


render() {
    return (
        <Wrapper>
            <Navbar
                counter={this.state.addCounter}
                showModal={this.showModalHandler}
            />
            <Modal show={this.state.purchased} />
            <Control addProduct={this.addProductHandler} />
        </Wrapper>
    )
}

}

导出默认购物

Navbar Cod 是：

const Navbar = (props) => {
return (
    <header className="header">
        <nav>
            <ul className="nav-items">
                <li className="nav-item"><a href="/">Home</a></li>
                <li className="nav-item"><a href="/">Products</a></li>
                <li className="nav-item"><a href="/">Contact Us</a></li>
            </ul>
        </nav>
        <a href="#"><i className="fas fa-shopping-cart shopping-cart"></i></a>
        <span className="counter" onClick={() => props.showModal}>Orders: {props.counter}</span>
    </header>
)

}

导出默认导航栏

模态代码为：

const Modal = (props) => {
return (
    <Wrapper>
        <div className="modal"
            style={{
                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                opacity: props.show ? '1' : '0',
            }}
        >
            <p>Hello Modal</p>
        </div>
    </Wrapper>
)

}

导出默认模态

Answer 1

showModal 函数未被调用。叫它

onClick={props.showModal}

或

onClick={() => props.showModal()}

Answer 2

使用箭头函数时，您必须调用相应的函数。您错过了添加函数括号：

onClick={() => props.showModal()}

或者您可以使用其中任何一种方式。

使用绑定():

onClick={props.showModal.bind(this)}

或通过引用：

onClick={props.showModal}

Demo

如何在 React DOM 中显示模态框？

How can I show Modal box in react DOM?

modal-dialog

reactjs