javascript - react.js 确认模式

Question

我想知道是否有人知道在 react.js 中创建删除(确认)模式的最简单方法？我一直在玩一些东西，但无法理解它。

模态框需要在点击时从垃圾箱图标中弹出。我是一个完全的 react 初学者，所以我很挣扎。

Answer 1

这是一个使用 https://github.com/GA-MO/react-confirm-alert 的例子-

yarn add react-confirm-alert

显示.jsx:

import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css'

const msg = `Item ${item.style} (barcode ${item.barcode}) is not 
  currently in this display. Do you want to add it?`

const addDialog = ({ onClose }) => {
  const handleClickedNo = () => {
    alert('clicked no')
    onClose()
  }
  const handleClickedYes = () => {
    alert('clicked yes')
    onClose()
  }
  return (
    <div className='add-dialog'>
      <h3>Add item to display</h3>
      <p>{msg}</p>
      <div className="add-dialog-buttons">
        <button onClick={handleClickedNo}>No</button>
        <button onClick={handleClickedYes}>Yes, add item</button>
      </div>
    </div>
  )
}      

confirmAlert({ customUI: addDialog })

您可以添加自己的自定义 CSS 来覆盖默认设置，例如我有:

/* override alert dialog defaults */
.react-confirm-alert-overlay {
  background: rgba(0,0,0,0.5);
}
.react-confirm-alert {
  background: white;
  width: 80%;
  padding: 1em;
}
/* custom alert dialog styles */
.add-dialog h3 {
  margin: 0;
}
.add-dialog-buttons {
  float: right;
}
.add-dialog-buttons button+button {
  margin-left: 0.5em;
}

看起来像这样 -