时间戳

首页 > 解决方案 > 在后台点击组件外部后关闭弹出组件并将状态设置为False

javascript - 在后台点击组件外部后关闭弹出组件并将状态设置为False

问题描述

这是我的Search.js组件。

class Search extends Component {
    state = {
        doctors: [],
        showTab: false
    }

    openTab = () => {
        this.setState({showTab: true});
        console.log('openTab state', this.state);
    }

    render() {
        let advancedSearch = null;
        if (this.state.showTab===true) {
            advancedSearch = (<AdvancedSearch />)
        }

        return (
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group">
                        <button class="btn btn-md btn-primary" data-toggle="modal" data-target="#myModal" onClick={this.openTab}>Advanced Search</button>
                    </div>
                </div>
                {advancedSearch}
            </div>
        )
    }
}

这是我的高级搜索组件。无需深入查看代码。

const advancedSearch = (props) => {
    return (
        <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title"> Advanced Search <i class="fa fa-search"></i> </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        {searchFieldsInner.map((field, idx) => (
                            <SearchField
                                key={idx}
                                colWidth={field.colWidth}
                                placeholder={field.placeholder}
                                formControl={field.formControl} />
                        ))}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Search</button>
                </div>
            </div>
        </div>
    </div>
)

基本上，当我单击 时advancedSearch，我希望状态变为true，我正在对if语句执行此操作。但是，一旦组件打开（基本上是一个向下滑动的弹出视图），并且当我单击弹出窗口关闭后的背景时，我想将showTab状态变为false. 关于如何做的任何建议？

标签： javascriptreactjs

解决方案

无论如何都应该打开高级搜索，因为它需要被点击。您应该控制的是高级搜索中的内容。AdvanceSearch因此， state 应该作为 props传入。

//Search.js
closeTab = () => {
        this.setState({showTab: false});
        console.log('closeTab state', this.state.showTab);
}


render() {
        return (
            <div class="row">
                <div class="col-md-2" onClick={this.closeTab}>
                   //skipped code
                </div>


                <AdvancedSearch isOpen={this.state.showTab} onClick={this.openTab}/> 
            </div>
        )
}

//advanceSearch.js
const advancedSearch = ({isOpen, open}) => {
    return (
       {isOpen && (
           <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                //skipped code
            </div>
        </div>
    </div>
       )}
)

推荐阅读