javascript - react.js confirmation modal - Stack Overflow

admin管理员组

文章数量:1276661

I was wondering if anyone knows the easiest way to create a delete(confirmation) modal in react.js? I have been playing around with a few things but cannot get my head around it.

The modal needs to pop up from a bin icon upon click. I am a plete beginner to react so I am struggling quite a bit.

I was wondering if anyone knows the easiest way to create a delete(confirmation) modal in react.js? I have been playing around with a few things but cannot get my head around it.

The modal needs to pop up from a bin icon upon click. I am a plete beginner to react so I am struggling quite a bit.

• javascript
• reactjs
• modal-dialog
• frontend

Share Improve this question Follow edited Jun 9, 2019 at 8:00 Yilmaz 49.7k1818 gold badges216216 silver badges268268 bronze badges asked Sep 14, 2017 at 14:59 falcsfalcs 5911 gold badge11 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here's an example using https://github./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 })

You can add your own custom css to override the defaults, e.g. I have:

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

which looks like this -

You can use this npm package. https://github./gregthebusker/react-confirm-bootstrap.

Once you have installed it, you can use it like this in your project.

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

I have been using this package in my project with a few modifications. But the default package should be more than enough for your use case.

Best thing for custom modal designing is react-bootstrap React-bootstrap contain its own Modal ponent, which is can be molded according to your own custom design, while having bootsrap helps you with other designing things in your application too. Modal Component is easy to use,handle & implement. By default it have its own cancel/ok buttons in it, you just need to implement and use. here is the link:

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

Hope that will help you.

Happy Coding!

本文标签： javascriptreactjs confirmation modalStack Overflow