反应状态不更新

Question

所以我正在制作一个简单的 React 应用程序，它需要在单击某物时显示一个模式。我使用 react-modal 来实现这一点，并且模式正在显示，但我无法再次关闭它。代码如下：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Paper from "./Paper";

    ReactDOM.render(
        <Paper title={"Title"} notes={"Notes"}/>,
        document.getElementById('root')
    );

以及论文定义：

    import React, {Component} from 'react';
    import Modal from 'react-modal';

    class Paper extends Component {

        constructor(props) {
            super(props);
            this.state = {modalIsOpen: false};
            this.showModal = this.showModal.bind(this);
            this.closeModal = this.closeModal.bind(this);
        }

        showModal() {
            this.setState({modalIsOpen: true});
        }

        closeModal() {
            this.setState({modalIsOpen: false});
        }

        render() {
            return (
                <div onClick={this.showModal}>
                    {this.props.title}
                    <Modal isOpen={this.state.modalIsOpen}>
                        <button onClick={this.closeModal}>close</button>
                        {this.props.notes}
                    </Modal>
                </div>
            );
        }

    }

如果我在开发人员工具中检查状态，状态就不会更新，我不知道为什么。谁能帮帮我？

Answer 1

我能够重现您的问题，这实际上有点奇怪 - 即使我在设置为 false 后在 setState 回调中记录了 this.state.modalIsOpen，该值仍然是 true。无论如何，我更改了代码以执行切换并解决了问题：

https://codesandbox.io/s/q38nzl9yy9

toggleModal() {
    this.setState({ modalIsOpen: !this.state.modalIsOpen });
}

render() {
    return (
    <div onClick={this.showModal}>
        {this.props.title}
        <Modal isOpen={this.state.modalIsOpen}>
        <button onClick={this.closeModal}>close</button>
        {this.props.notes}
        </Modal>
    </div>
    );
}

我仍在深入研究为什么 this 上下文似乎变得混乱，因为这似乎是一个简单的示例。