Question

我正在尝试在显示弹出式div的网页上显示一个按钮。弹出窗口上还有一个隐藏它的关闭按钮。在reactjs中执行此操作的正确方法是什么？我的想法是在按钮上设置一个状态来切换弹出窗口的可见性，而弹出窗口会修改它。

var Parent = React.createClass({
    getInitialState: function() {
        return {visible: false};
    },
    buttonOnClick: function() {
        if(this.state.visible == true)
            this.setState({visible: false});
        else
            this.setState({visible: true});
    },
    render: function() {
        var elem;
        if(this.state.visible)
            elem = <Popup/>
        else
            elem = "";
        ...
        {elem}
    }
}

var Popup = React.createClass({
    closeButtonOnClick: function() {
        this.setState({visible: false});   //this.state is null!
    }
    render: function() {
        ...
    }
});

但是，我无法从子类访问状态并将其作为prop传递似乎也不起作用（按值传递，而不是引用）。我该怎么做？

Answer 1

不要直接访问父组件上的状态，只需通过设置<Popup>将回调传递给onClose，<Parent>处理setState({visible: false})：

var Parent = React.createClass({
    getInitialState: function() {
        return {visible: false};
    },
    buttonOnClick: function() {
        if(this.state.visible == true)
            this.setState({visible: false});
        else
            this.setState({visible: true});
    },
    handlePopupClose: function() {
        this.setState({visible: false});
    },
    render: function() {
        var elem;
        if(this.state.visible)
            elem = <Popup onClose={this.handlePopupClose}/>
        else
            elem = "";
        ...
        {elem}
    }
}

var Popup = React.createClass({
    closeButtonOnClick: function() {
        this.props.onClose();
    }
    render: function() {
        ...
    }
});

在子类中访问状态

1 个答案: