reactjs - 重定向发生在 onClick() 之前的 REACT { Link }

Question

重定向发生在 onClick() 之前，在 REACT { Link }

你好。我整天都在尝试播放 onClick 按钮事件的声音。它在我删除链接 (URL) 时有效，但使用链接时，页面会在不触发 onClick 事件的情况下转到新的 URL。我已经这样尝试过:onClick={() => this.playAudioHandler}。如果有人可以修复我的代码以便在转到新 URL 之前触发“playAudioHandler”，我将不胜感激。

这是我的实际代码:

import React, { Component } from "react";
import { Link } from "react-router-dom";

import classes from "./Button.module.css";
import clickSound from "../assets/click.mp3";

class Button extends Component {
  playAudioHandler = (event) => {
    const audioEl = document.getElementsByClassName("audio-element")[0];
    audioEl.play();
    // event.preventDefault();
  };
  render() {
    return (
      <>
        <audio className="audio-element">
          <source src={clickSound}></source>
        </audio>
        <Link to={this.props.linkToGo}>
          <button
            type="submit"
            onClick={this.playAudioHandler}
            className={[classes.Button, classes[this.props.btnType]].join(" ")}
            // join() to transform the array in a string
          >
            {this.props.children}
          </button>
        </Link>
      </>
    );
  }
}

export default Button;

Answer 1

链接触发每次点击，因为这是它的工作方式。在您的例子中，按钮被 Link 包裹，因此 Link 被触发。
实现这一目标的一个简单方法是避免使用 Link，因为看起来您正在使用 react-router-dom。

<button
   type="submit"
   onClick={this.playAudioHandler}
   className={[classes.Button, 
   classes[this.props.btnType]].join(" ")}
>
   {this.props.children}
</button>

并且您的处理程序将在播放声音后重定向:

playAudioHandler = (event) => {
    event.preventDefault();
    const audioEl = document.getElementsByClassName("audio-element")[0];
    audioEl.play();

    const waitSecs = 3000 // 3 secs
    setTimeout(() => {
      history.push('/url');
      OR
      window.location.href = 'url'
    }, waitSecs);
  };