在react中单击输入时显示叠加层

IT技术 html css reactjs
2021-05-06 06:27:24

当单击某个输入字段时，我试图显示一个叠加层。我正在做这个react。我怎样才能做到这一点？

这是我的代码

import React, { Component } from 'react';
import cam from '../../Resources/img/cam.png';
import SinglePost from '../../Components/Post/single_post';

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;

我应该采取什么方法？

2个回答

我创建了一个示例react组件。我希望这会在某种程度上帮助你实现你想要的。

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>

输入：

<input onFocus={() => this.setState({show_overlay: true})} />

在同一render()函数中的某个地方添加覆盖 div：

<div 
  style={{display: this.state.show_overlay === true ? 'block' : 'none'}}
>
  overlay
</div>

当然，根据需要向 div 添加样式以获得适当的叠加效果，您的 UI 需要什么

要关闭覆盖，您需要在某些操作上添加另一个事件侦听器，例如单击 

<button onClick={() => this.setState({show_overlay: false})}>
  Close overlay
</button>
其它你可能感兴趣的问题
上一篇Anet A8 - X 和 Y 轴不是方形 - 如何修复？ 下一篇在 redux 中使用 thunk 中间件比使用常规函数作为异步动作创建者有什么好处？