操作和功能onClick与相同的按钮

时间:2017-08-02 10:56:04

标签: javascript reactjs redux popup

我有两个按钮:

< button onClick= {() => { actions.showInfoOnHover(movie)}}> Show Info < /button>
< button onClick={this.open}> Show Info < /button>

第一个是调用redux动作,第二个是一个简单的函数:

open() {
    this.setState({ showModal: true });
  }

第一个按钮获取Popup的信息,第二个按钮激活Popup本身。有没有简单的方法将这些结合在一起?

UDPATE: 我试着把它结合起来像

open() {
    actions.showInfoOnHover(movie);
    this.setState({ showModal: true });
  }



 < button onClick={this.open}> Show Info  </ button> 

在这种情况下,action和Popup都不起作用:action不传递数据,Popup不显示。

1 个答案:

答案 0 :(得分:1)

您可能会遗漏一些事情

首先,当调用open函数时,你需要传递movie参数,因为你需要它来获取信息,或者你需要从道具中使用它

其次,您应该从操作中返回一个承诺,以便您可以在信息准备就绪后打开模式

您的代码必须类似于

open() {
    this.props.actions.showInfoOnHover(this.props.movie)
        .then((res) => {
             this.setState({ showModal: true });
         })

}

< button onClick={this.open}> Show Info < /button>
  

P.S。您需要检查的另一件事是您是否正确   派出行动

看到你的代码之后,似乎你没有获得API调用来获取信息,所以你可以简单地使用

open() {
    actions.showInfoOnHover(this.props.movie)
    this.setState({ showModal: true });

}

< button onClick={this.open}> Show Info < /button>