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

我能够重现你的问题，实际上有点奇怪 - 即使我在设置为auto p = std::static_pointer_cast<MeshRenderer>(getShared()); std::shared_ptr<IRenderer> q = p;之后在this.state.modalIsOpen回调中记录了setState，价值仍然是false。无论如何，我改变了代码以执行切换，它解决了问题：

https://codesandbox.io/s/q38nzl9yy9

true

我仍在深入研究为什么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> ); }背景似乎变得混乱，因为这似乎是一个直截了当的例子。

反应状态不更新

1 个答案: