html - 单击 Reactjs 渲染 View

Question

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

这是应该出现的view

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>
    );
}