React.js确认模态窗口

Question

我想知道是否有最简单的方法在react.js中创建一个删除（确认）模态框？我已经尝试了一些东西，但是还是无法理解。

模态框需要在单击垃圾桶图标时弹出。由于我是react的完全新手，所以我遇到了很多困难。

- falcs

Answer 1

以下是使用https://github.com/GA-MO/react-confirm-alert的示例：

yarn add react-confirm-alert

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

您可以添加自己的自定义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;
}

这是一个类似于这样的对话框 -

- Brian Burns

Answer 2

您可以使用这个npm包。https://github.com/gregthebusker/react-confirm-bootstrap.

安装完成后，您可以在项目中像这样使用它。

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

我在我的项目中使用了这个包，做了一些修改。但是默认的包应该已经足够满足你的需求了。

- codeslayer1

---

非常感谢你！不幸的是，我目前无法安装任何东西到我运行的服务器上。 - falcs

没问题。如果需要其他帮助，可以在这里加入我的Slack https://code-slayers-den.slack.com/。我最近为开发者创建了这个群组。 - codeslayer1

Answer 3

自定义模态设计的最佳选择是react-bootstrap。React-bootstrap包含其自己的Modal组件，可以根据您自己的自定义设计进行塑造，同时使用bootstrap还可以帮助您在应用程序中处理其他设计事项。 Modal组件易于使用、处理和实现。默认情况下，它在其中具有自己的取消/确定按钮，您只需要实现并使用即可。 这是链接：

https://react-bootstrap.github.io/components/modal/

希望能对你有所帮助。 愉快的编程！

- Osama Abid