Перенаправление происходит перед onClick () на REACT {Link}

Question

Перенаправление происходит перед onClick () на REACT {Link}

Здравствуйте. Я весь день пытаюсь воспроизвести звук на кнопке Event. Это работает, когда я удаляю ссылку (URL), но со ссылкой страница переходит на новый URL без запуска события onClick. Я уже пытался так: onClick = {() => this.playAudioHandler}. Я действительно ценю, если кто-то может исправить мой код, чтобы запустить «playAudioHandler» перед переходом на новый URL.

Это мой фактический код:

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

Answer 2

Как насчет попытки установить состояние, которое определяет, куда перенаправить, и установки этого состояния inClick кнопки:

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

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

class Button extends Component {
    constructor(super) {
        super(props);
        this.state = {
            redirect: null
        }
 }
 playAudioHandler = (event) => {
      const audioEl = 
   document.getElementsByClassName("audio-element")[0];
    audioEl.play();
    // event.preventDefault()
     this.setState({ redirect: this.props.linkToGo })
 };
 render() {
      if (this.state.redirect) {
       return <Redirect to={redirect} />
   }
   return (
  <>
    <audio className="audio-element">
      <source src={clickSound}></source>
    </audio>

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

           </>
        );
    }
}

export default Button;

Дайте мне знать, если это работает!