Javascript 在单击时调用此.props.message（）

我已将

this.props.message（）

传递给我的重定向组件，我希望它在单击按钮时闪烁

但它只在

componentDidMount（）

中起作用，而在

handleRedirection（）

中不起作用，如下面的注释所示：

Spotify.jsx:

  componentDidMount() {
    const params = this.getHashParams();
    const access_token = params.access_token;
    const state = params.state;
    const storedState = localStorage.getItem(Credentials.stateKey);
    localStorage.setItem('spotifyAuthToken', access_token);
    localStorage.getItem('spotifyAuthToken');

    if (window.localStorage.getItem('authToken')) {
      this.setState({ isAuthenticatedWithSpotify: true });
    };
    if (access_token && (state == null || state !== storedState)) {
      alert('Click "ok" to finish authentication with Spotify');
    } else {
      localStorage.removeItem(Credentials.stateKey);
    }
    this.props.onConnectWithSpotify(access_token); 
    this.props.message('You linked your Spotify account!', 'success');//works here, but this is undesired
  };

  // NOTE1: this is where app is redirected to Spotify Server, in which the application states a redirection page, in my case, `localhost`.
  handleRedirect(event) {
    const params = this.getHashParams();
    const access_token = params.access_token;
    console.log(access_token);

    const state = this.generateRandomString(16);
    localStorage.setItem(Credentials.stateKey, state);

    let url = 'https://accounts.spotify.com/authorize';
    url += '?response_type=token';
    url += '&client_id=' + encodeURIComponent(Credentials.client_id);
    url += '&scope=' + encodeURIComponent(Credentials.scope);
    url += '&redirect_uri=' + encodeURIComponent(Credentials.redirect_uri);
    url += '&state=' + encodeURIComponent(state);
    this.props.message('You linked your Spotify account!', 'success');//does not work anywhere inside here
    window.location = url;
    //NOTE2: after button is clicked, browser shows: http://localhost/#access_token=mytoken&token_type=Bearer&expires_in=3600&state=SRVMdf2PBuSddwU8 
    // I guess the issue here might have a correlation to this
  };

  render() {
    const {menu} = this.props;
    if (menu.length === 0 ){
      return (
        <div className="button_container">
          <button className="sp_button" onClick={(event) => this.handleRedirect(event)}>
            <strong>LINK YOUR SPOTIFY ACCOUNT</strong>
          </button>
        </div>
      )
    }else{
      return (<Redirect to={'/menus'} />)}
  }

import React from 'react';    
    const Message = (props) => {
      return (
        <div className={`notification is-${props.messageType}`}>
          <button className="delete" onClick={()=>{props.removeMessage()}}></button>
          <span>{props.messageName}</span>
        </div>
      )
    };

    export default Message;

Message.jsx:

  componentDidMount() {
    const params = this.getHashParams();
    const access_token = params.access_token;
    const state = params.state;
    const storedState = localStorage.getItem(Credentials.stateKey);
    localStorage.setItem('spotifyAuthToken', access_token);
    localStorage.getItem('spotifyAuthToken');

    if (window.localStorage.getItem('authToken')) {
      this.setState({ isAuthenticatedWithSpotify: true });
    };
    if (access_token && (state == null || state !== storedState)) {
      alert('Click "ok" to finish authentication with Spotify');
    } else {
      localStorage.removeItem(Credentials.stateKey);
    }
    this.props.onConnectWithSpotify(access_token); 
    this.props.message('You linked your Spotify account!', 'success');//works here, but this is undesired
  };

  // NOTE1: this is where app is redirected to Spotify Server, in which the application states a redirection page, in my case, `localhost`.
  handleRedirect(event) {
    const params = this.getHashParams();
    const access_token = params.access_token;
    console.log(access_token);

    const state = this.generateRandomString(16);
    localStorage.setItem(Credentials.stateKey, state);

    let url = 'https://accounts.spotify.com/authorize';
    url += '?response_type=token';
    url += '&client_id=' + encodeURIComponent(Credentials.client_id);
    url += '&scope=' + encodeURIComponent(Credentials.scope);
    url += '&redirect_uri=' + encodeURIComponent(Credentials.redirect_uri);
    url += '&state=' + encodeURIComponent(state);
    this.props.message('You linked your Spotify account!', 'success');//does not work anywhere inside here
    window.location = url;
    //NOTE2: after button is clicked, browser shows: http://localhost/#access_token=mytoken&token_type=Bearer&expires_in=3600&state=SRVMdf2PBuSddwU8 
    // I guess the issue here might have a correlation to this
  };

  render() {
    const {menu} = this.props;
    if (menu.length === 0 ){
      return (
        <div className="button_container">
          <button className="sp_button" onClick={(event) => this.handleRedirect(event)}>
            <strong>LINK YOUR SPOTIFY ACCOUNT</strong>
          </button>
        </div>
      )
    }else{
      return (<Redirect to={'/menus'} />)}
  }

import React from 'react';    
    const Message = (props) => {
      return (
        <div className={`notification is-${props.messageType}`}>
          <button className="delete" onClick={()=>{props.removeMessage()}}></button>
          <span>{props.messageName}</span>
        </div>
      )
    };

    export default Message;

从“React”导入React；
常量消息=（道具）=>{
返回(
{props.removeMessage（）}}>
{props.messageName}
)
};
导出默认消息；

---

单击按钮时如何调用

this.props.message（'your linked your Spotify account！'，'success'）

？

handleRedirect

未绑定到组件实例，这可能是它无法正常工作的原因尝试绑定它或将其作为箭头函数写入：

handleRedirect = event => {
  // ...
}

---

当我添加

event.preventDefault（）

时，问题得到了解决，如下所示：

  handleRedirect(event) {
    event.preventDefault() // <-------------
    this.props.createMessage('You linked your Spotify account!', 'success');
    ...
  }

handleRedirect（事件）{
event.preventDefault（）//
this.props.message
仍然不起作用。此外，
handleRedirect
可以与上面的代码一起工作和重定向。您可以使用并在那里放置一个工作示例吗？这将更容易使用！在App.jsx文件中-函数被定义为“message”，而在props中传递的函数为
this.createMessage
，即作为输入错误，抱歉。已修复。这不是问题所在，因为它在
componentdidMount（）
内部工作。请您通过注释
窗口位置来检查。位置
。完成了。不起作用，因为没有重定向到spotify服务器并返回。