在反应中打开带有 onFocus 表单的叠加层

Question

您好，当我将焦点放在某个输入字段上时，我正在寻找一种方法来显示带有表单的叠加层。我想使用反应来做到这一点。我该怎么做？

我的代码

import React, { Component } from 'react';


class Middle extends Component {

    constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
    }

    render() {

        function popup_ques(e) {
            e.preventDefault();
            alert("now the overlay should appear");
        }

        return (
            <div className="middle_div">

                <input className='post_data_input' placeholder="Ask your question here" ref="postTxt"
                       onClick={popup_ques}/>

            </div>


        );
    }
}

export default Middle;

我编写了一个函数来在单击输入字段时显示警报。而不是警报，我想显示带有表单的透明覆盖层。

我想做这样的事情

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

谢谢你。

Answer 1

所以我在这里编写了代码来更改侧栏的类名。每次调用 toggleSideBar 时，它都会将 className 从 hideSideBar 更改为 showSideBar，反之亦然。 hideSideBar 和 showSideBar 的 css 应该写成代码学校的链接。希望它会起作用。

import React, { Component } from 'react';


class Middle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebar: 'hideSideBar',
      posts: [],
    }
  }

  toggleSideBar() {
    if(this.state.toggleBar === 'showSideBar') {
      this.setState({ toggleBar: 'hideSideBar' });
    } else {
      this.setState({ toggleBar: 'showSideBar' });        
    }
  }

  render() {
    return (
      <div className="middle_div">
        <input
          className='post_data_input'
          placeholder="Ask your question here"
          ref="postTxt"
          onClick={this.toggleSideBar.bind(this)}
        />

        <div className={this.state.sidebar} />
          // This will be the sidebar
        </div>
      </div>
    );
  }
}

export default Middle;

Answer 2

我根据您提供的链接创建了一个反应组件。 我希望这会在某种程度上帮助你实现你想要的。

class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            style : {
                width : 350
            }
        };
        this.openNav = this.openNav.bind(this);
        this.closeNav = this.closeNav.bind(this);
    }

    componentDidMount() {
        document.addEventListener("click", this.closeNav);
    }

    componentWillUnmount() {
        document.removeEventListener("click", this.closeNav);
    }

    openNav() {
        const style = { width : 350 };
        this.setState({ style });
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        document.addEventListener("click", this.closeNav);
    }

    closeNav() {
        document.removeEventListener("click", this.closeNav);
        const style = { width : 0 };
        this.setState({ style });
        document.body.style.backgroundColor = "#F3F3F3";
    }

    render() {
        return (
          <div>
          <h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style={{fontSize:30,cursor:"pointer"}} onClick={this.openNav}>&#9776; open</span>
            <div
                ref       = "snav"
                className = "overlay"
                style     = {this.state.style}
            >
                <div className = "sidenav-container">
                    <div className = "text-center">
                      <h2>Form</h2>
                      <p>This is a sample input form</p>
                    </div>
                    <a
                        href      = "javascript:void(0)"
                        className = "closebtn"
                        onClick   = {this.closeNav}
                    >
                        ×
                    </a>
                  <div className = "list-group">
                      {/*your form component goes here */}
                      {this.props.children}
                  </div>
                </div>
            </div>
          </div>
        );
    }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('test')
);

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.overlay h2, .overlay p {
  color:white;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="test"></div>