[英]react.js confirmation modal
我想知道是否有人知道在 react.js 中創建刪除(確認)模式的最簡單方法? 我一直在玩一些東西,但無法理解它。
模態需要在單擊時從 bin 圖標彈出。 我是一個完整的初學者,所以我很掙扎。
你可以使用這個 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>
我一直在我的項目中使用這個包,並做了一些修改。 但是對於您的用例來說,默認包應該綽綽有余。
這是使用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;
}
看起來像這樣 -
自定義模態設計的最佳選擇是react-bootstrap
React-bootstrap 包含自己的 Modal 組件,它可以根據您自己的自定義設計進行模制,而bootsrap
可以幫助您在應用程序中進行其他設計。 模態組件易於使用、處理和實現。 默認情況下,它有自己的取消/確定按鈕,您只需要實現和使用即可。 鏈接在這里:
https://react-bootstrap.github.io/components/modal/
希望這會幫助你。
快樂編碼!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.