react 实现confirm

原博客忘记哪个了，再次感谢原作者。原文是js，我这是用的React，原理就是对hide属性的控制

html,body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei";
}
.wrap-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  text-align: center;
  z-index: 999;
}
.dialog {
  position: relative;
  margin: 15% auto;
  width: 300px;
  background-color: #FFFFFF;
}
.dialog .dialog-header {
  height: 20px;
  padding: 10px;
  background-color: lightskyblue;
}
.dialog .dialog-body {
  height: 30px;
  padding: 20px;
}
.dialog .dialog-footer {       padding: 8px;
  background-color: whitesmoke;
}
.btn {
  width: 70px;
  padding: 2px;
}
.hide {
  display: none;
}
.ml50 {
  margin-left: 50px;
}

import React from 'react';
import './App.css';

class App extends React.Component
{
  constructor()
  {
    super();
    this.state=
        {
          confirmHidden: "hide"
        };
    this.remove = this.remove.bind(this);
    this.confirmClick = this.confirmClick.bind(this);
  }

  remove()
  {
    console.log("remove");

    this.setState({ confirmHidden: "" })
  }

  confirmClick(value)
  {
    // 根据value值执行对应操作
    if(value === "ensure")
    {
      
    }
    else
    {
      
    }
  }

  render()
  {
    return <div style={ { padding: "0", margin: "0", width: "100%"} }>
      <input type="button" value="删除" className="btn ml50" id="remove" onClick={ ()=> this.remove() }/>
        <div className={`wrap-dialog ${ this.state.confirmHidden }`}>
          <div className="dialog">
            <div className="dialog-header">
              <span className="dialog-title">删除确认</span>
            </div>
            <div className="dialog-body">
              <span className="dialog-message">你确认删除此条信息？</span>
            </div>
            <div className="dialog-footer">
              <input type="button" className="btn" id="confirm" onClick={ ()=>this.confirmClick("ensure") } value="确认"/>
              <input type="button" className="btn ml50" id="cancel" onClick={ ()=>this.confirmClick("cancel") } value="取消"/>
            </div>
          </div>
        </div>
    </div>
  }
}

export default App;