如何修复模态窗口？

debugcn 发表于 Dev

杰西卡·康沃尔（Jessica Cornish）

单击任何方式都会关闭我的模态窗口。但是，仅当您单击模态窗口时，它才应关闭。我究竟做错了什么？当我单击应关闭的窗口时，我做了“覆盖”。现在我什至不能写任何形式的表格。

你能帮我吗？我还是新手。

这就是我自己写的。

class App extends React.Component {

    constructor(props){
        super(props);
        this.state = {isShow: false};
        this.showHidePopup = this.showHidePopup.bind(this);
    }

    showHidePopup(){
        let isShow = this.state.isShow;
        this.setState({isShow: !isShow});
    }

    render() {
        return (
            <div>
                <div>
                    <li onClick={this.showHidePopup} className="sign-in">sign up</li>
                    {this.state.isShow ? <Authorisation /> : null}
                </div>
            </div>
        );
    }
}

const styles = {
    afterClick:{display:'none'},
    beforeClick:{display:'block'}
}

class Authorisation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isClickedOutside: false
        }
        this.handleClickBackground = this.handleClickBackground.bind(this);
    }

    handleClickBackground = () => {
        this.setState( {isClickedOutside: !this.state.isClickedOutside})
    }

    render() {
        return (
            <div className={'overlay'} onClick={this.handleClickBackground} style={this.state.isClickedOutside ? styles.afterClick : styles.beforeClick} >
                <div className="login-form">
                    <p className="enter">Вход</p>
                    <button className="vk">Вконтакте</button>
                    <div className="info-login">
                        <input required="required" type='email' placeholder="Почта"/>
                        <input required="required" type="password" placeholder="Пароль"/>
                        <a className="iForgotPassword" href="/#">забыли пароль?</a>
                    </div>
                    <button className="enter-button">Войти</button>
                    <div className="registration">Зарегистрироваться</div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

.overlay {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    margin: auto;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #999;
}

.login-form {
  width: 300px;
  height: 300px;
  border:1px solid #000;
  background:#777;
  z-index:3;
  margin:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

拉克夏·塔库尔（Lakshya Thakur）

将您的实现更改handleClickBackground为以下内容：

handleClickBackground = (e) => {
    if(e.target.className==='overlay')
    {
        this.setState( {isClickedOutside: !this.state.isClickedOutside})
    }
    }

这样可以确保您target是唯一负责设置状态的人。当您单击“登录”表单时，它还会触发一个click事件，该事件冒泡到叠加层并触发onClick。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。