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

Question

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

你好。我整天都在尝试播放声音 onClick Button Event。当我删除链接（URL）时它可以工作，但是通过链接，页面会转到新的 URL 而不会触发 onClick 事件。 我已经尝试过这样的：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);
  };

Answer 2

如何尝试设置一个定义重定向位置的状态并在单击按钮时设置该状态：

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;

让我知道它是否有效！