如何为单个<a>标签设置连续onClick动作：先确认再执行提交？

Got it, let's get this sorted! The straightforward fix here is to wrap your existing submission logic in a check using the browser's native confirm() function. Here's exactly how to adjust your code:

<a onClick={() => {
  // Show confirmation dialog - returns true if user clicks "OK"
  const isConfirmed = window.confirm('Are you sure you want to submit this?');
  
  // Only run the submission if user confirmed
  if (isConfirmed) {
    this.Submission();
  }
}}><Icon/></a>

Breakdown of what's happening: #

• When the user clicks the link, window.confirm() pops up a standard yes/no dialog box. It returns true if the user selects "OK", and false if they hit "Cancel".
• We only call your original this.Submission() method after verifying the user confirmed the action. If they cancel, nothing happens—perfect for preventing accidental submissions!

Quick check for class components: #

If you're working with a React class component, make sure your Submission method is properly bound to the component instance. If you haven't set this up yet, you have two easy options:

1. Bind it in the constructor:

   constructor(props) {
     super(props);
     // Bind the method to 'this' so it works correctly in the onClick handler
     this.Submission = this.Submission.bind(this);
   }
   

2. Define Submission as an arrow function (auto-binds this):

   Submission = () => {
     // Your existing submission logic (API calls, form handling, etc.) goes here
   }
   

That's all there is to it! Now your users will get a confirmation prompt before any submission action runs.

内容的提问来源于stack exchange，提问作者Aman_Kawatra