当输入被点击时显示叠加 [英] display a overlay when input is clicked in react

问题描述

我尝试在点击特定输入字段时显示叠加层。我在做这个反应。

 
  import React，{Component} from'react'; 
 import cam从'../../Resources/img/cam.png'; 
 import SinglePost from'../../Components/Post/single_post'; 
 
 class Middle extends Component {
 
 constructor（props）{
 super（props）; 
 this.state = {
 post：[] 
} 
} 
 
 render（）{
 
 function popup_ques e）{
 e.preventDefault（）; 
 alert（now the overlay should appear）; 
} 
 
 return（
< div className =middle_div> 
 
< input className ='post_data_input'placeholder = question hereref =postTxtonClick = {popup_ques} /> 
 
< / div> 
）; 
} 
} 
 
 export default中间; 
  

我应该采取什么方法？

解决方案

我创建了一个示例反应组件。
我希望这将有助于你在某种程度上实现你想要的。

  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>全屏幕叠加导航示例< / h2>< p>点击下面的元素打开全屏叠加导航菜单< / p>< p&此示例中，导航菜单将从左向右滑动：< / p>< span style = {{fontSize：30，cursor：pointer}} onClick = {this.openNav}>& 9776;打开< / span>< div ref =snavclassName =overlaystyle = {this.state.style}>< div className =sidenav-container>< div className = -center>< h2>表单< / h2>< p>这是一个示例输入表单< / p>< / div>< a href =javascript：void（0）className =closebtn onClick = {this.closeNav}> ×< / a> < div className =list-group> {/ *你的表单组件到这里* /} {this.props.children}< / div> < / div> < / div> < / div> ）; }} ReactDOM.render（< Test />，document.getElementById（'test'））;  

  .overlay {height：100％; width：0;位置：固定; 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;颜色：＃818181;显示：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和（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>  div> 

I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?

This is my code

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;

What is the approach I should take?

解决方案

I have created a sample react component. I hope this will help you in somewhat way to achieve what you want.

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>

这篇关于当输入被点击时显示叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！