想要在React JavaScript中使用HTML5打开自定义弹出窗口

Question

我尝试过这个链接：

http://codepen.io/anon/pen/zxLdgz

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

但它在jsx文件中无法工作。

<a href="#openModal">Open Modal</a>

<div id="openModal" className="modalDialog">
    <div>
        <a href="#close" title="Close" className="close">X</a>
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using the powers of CSS3.</p>
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
</div>

还有这段代码：

ondialog() 
{
    <dialog id="window">
        <h3>Sample Dialog!</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>
        <button id="exit">Close Dialog</button>
    </dialog>
}

在点击按钮后仍然没有任何作用。

- Kirti

Answer 1

实际上这里没有打开模态框的代码，但你可以使用ES6类语法和类属性来实现此功能（可能需要正确的Babel配置）。

import React, { Component } from 'react'

class Page extends Component {

  constructor (props) {
    super(props)
    this.state = { modalActive: false }
  }

  openModal = () => {
    this.setState({ modalActive: true })
  }

  closeModal = () => {
    this.setState({ modalActive: false })
  }

  render () {
    return (
      <div>
        <button onClick={this.openModal}>Open modal</button>

        {this.state.modalActive && (
          <div className='modalDialog'>
            <a title='Close' onClick={this.closeModal}>X</a>
            <h2>Modal</h2>
            <p>This is a sample modal</p>
          </div>
        )}
      </div>
    )
  }
}

我所做的基本上是在状态中保持一个布尔值来定义模态框是否显示，我的条件是 this.state.modalActive，如果该值为真，则呈现模态框。

- Preview

Answer 2

将open属性添加到您的对话框中将使其可见：

render () {
  return (
  <div>
    {this.state.modalActive && (
      <dialog className='modalDialog' open>
      </dialog>
    )}
  </div>
)

}

- Nacho Coloma