时间戳

首页 > 解决方案 > 我必须在单击跨度时显示弹出窗口，但元素未出现在 DOM 中

reactjs - 我必须在单击跨度时显示弹出窗口，但元素未出现在 DOM 中

问题描述

我正在尝试在单击跨度时显示一个 div 弹出窗口。即使函数内部的代码正在执行，div 在 DOM 中根本不可见。我不确定我哪里出错了。

<span id="test" onClick={()=>this.bindPopUpData("test")}>

这里我调用函数来绑定弹出窗口。

bindPopUpData=(dimension) =>{ 

return (

  <div id="">
      <div className="details_table">
          <div className="close_popup">
              <span className="icon-Close"></span>
          </div>
      </div>
  </div>

   ); 
}

-- 在这里我试图绑定那个弹出窗口

有人可以告诉我哪里出错了吗？

标签： reactjs

解决方案

问题是你的事件处理程序只是返回一个值，你没有告诉浏览器把它放在任何地方。

选项 1：使用您的事件处理程序将弹出窗口构建到 DOM 中display:none并显示/隐藏它。

选项 2：让您的事件处理程序将弹出窗口注入具有document.createElement和document.appendChild功能的 DOM。

使用 React，我推荐选项 1，因为您可以将弹出窗口设为组件，并且仅在父组件检测到事件时才呈现它。

class myComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showpopup: false
    }
    this.myHandler = this.myHandler.bind(this)
  }
  myHandler () {
    this.setState({showpopup: !showpopup})
  }
  render () {
    return (
      <section>
       <span onClick={this.myHandler}></span>
        {this.state.showpopup ? <Popup /> : ''}
      </section>
    )}
}

推荐阅读