Question

我试图在用户点击列表中的项目时显示/隐藏模态。模态按计划显示但不能隐藏。调用_dismiss()后，setState会执行，但当我console.log回调中的state时，参数show仍为 true

为什么会这样？

Message.jsx

export default class Message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };

        this._onClick = this._onClick.bind(this);
        this._dismiss = this._dismiss.bind(this);
    }

    _onClick(e) {
        e.preventDefault();
        this.setState({
            show: true
        })
    }

    _dismiss() {
        this.setState({
            show: false
        }, function () {
            console.log(this.state) // logs: Object {show: true}
        })
    }

    render() {
        return (
            <div onClick={this._onClick} className="message">
                <Modal show={this.state.show} close={this._dismiss}>
                    <h1>...</h1>
                </Modal>
            </div>
        );
    }
}

Modal.jsx

export default class Modal extends React.Component {
    constructor(props) {
        super(props);

        this._onClose = this._onClose.bind(this);
    }

    _onClose() {
        this.props.close()
    }

    render() {
        if (this.props.show) {
            return (
                <div className="modal" onClick={this._onClose} >
                    <div className="content">
                        {this.props.children}
                    </div>
                </div>
            );
        } else {
            return null
        }
    }
}

Answer 1

当点击子项时，div仍在进行onClick事件事件。我怀疑正在调用_dismiss，然后调用_onClick。反应批量setState次调用，最终将show设置回true。

救济。

如果处理程序的close回调函数将事件作为参数提供给你。在评论e.stopPropagation()中调用e.stopImmediatePropagation()或来自@richsilv。

或者如果它没有通过该事件。如果_onClick为真或假，请检查show。如果是，请不要setState

为什么State在setState之后保持不变

1 个答案: