Question

我创建了一个overlay元素，我希望它在单击某个输入字段时出现。我是新来的，所以我不清楚我应该怎么做。

这是应该出现的视图

import React, { Component } from 'react';
import pro_pic from '../../Resources/img/Anon.jpg';
import menu_drop from '../../Resources/img/drop.png';

class QuestionOverlay extends Component {


    render() {

        return (

            <div id="overlay">

            </div>



            )
    }
}

export default QuestionOverlay;

点击事件在这里

 render() {

        function popup_ques(e) {
            e.preventDefault();

            alert("render overlay view");
        }

        return (
            <div className="middle_div">

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



            </div>


        );
    }

所以当我点击输入字段时，我创建的叠加层应该出现而不是我给出的警告。

Answer 1

这就是我要做的事情：

constructor(props) {
  super(props);

  this.state = {
    overlayVisible: false
  }
}

render() {
    function popup_ques(e) {
        e.preventDefault();

        this.setState({
          overlayVisible: true
        });
    }

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

            {this.state.overlayVisible && <QuestionOverlay />}
        </div>
    );
}

你的函数必须是纯粹的，所以，根据你获得UI渲染的状态，如果你想插入一些东西，你就改变你的状态，但你的渲染函数保持不变。

然而，每次显示时，这种方法都会有效地构建一个新的叠加层，如果你想保持状态，那么最好保留组件但更改它的渲染：

import React, { Component } from 'react';

class QuestionOverlay extends Component {
    render() {
      if(!this.props.visible) {
        return null
      }

      return (<div id="overlay"/>)
    }
}

export default QuestionOverlay;

容器：

constructor(props) {
  super(props);

  this.state = {
    overlayVisible: false
  }
}

render() {
    function popup_ques(e) {
        e.preventDefault();

        this.setState({
          overlayVisible: true
        });
    }

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

            <QuestionOverlay visible={this.state.overlayVisible}/>
        </div>
    );
}

单击Reactjs渲染视图

1 个答案: