Javascript react.js确认模式

我想知道是否有人知道在react.js中创建删除（确认）模式的最简单方法？我一直在玩弄一些东西，但我的头脑无法摆脱它

---

点击后，模式需要从箱子图标中弹出。我是一个反应完全的初学者，所以我很挣扎

您可以使用此npm包

一旦安装了它，您就可以在项目中像这样使用它

<ConfirmationModal
    onConfirm={this.onConfirm}
    body="Are you sure?"
    confirmText="Yes"
    cancelText="No"
    title="Delete confirmation">
    <Button>Button Text</Button>
</ConfirmationModal>

按钮文本

我在我的项目中使用了这个包，但做了一些修改。但是默认的包对于您的用例来说应该足够了-

display.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 })

看起来是这样的-

---

定制模态设计的最佳选择是

react bootstrap

React bootstrap包含自己的模式组件，可以根据您自己的自定义设计进行模压，而使用

bootsrap

也可以帮助您在应用程序中进行其他设计。 模态组件易于使用、处理和实现。默认情况下，它有自己的取消/确定按钮，您只需要实现和使用。 以下是链接：

希望这对你有帮助

---

快乐编码

非常感谢！不幸的是，我不能在服务器上安装任何东西，我现在正在运行这个。没问题。如果你需要任何其他帮助，你可以在这里和我一起休息。我最近为其他开发人员创建了这个组。

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

/* 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;
}