如何使用常用组件中的按钮作为href并使用onClick事件进行反应？

Question

我很反应。我有一个场景 - 使用一个常见的弹出窗口。

CommonPopup.js

 <ButtonWrapper>
      <Button secondary onClick={props.onRequestYes}>Yes</Button>
      <Button onClick={props.onRequestNo}>No</Button>
 </ButtonWrapper>

现在我需要在两个不同的组件中使用这个常见的弹出窗口。

组件1 - 使用弹出窗口并调用父组件函数并执行一些正常工作的操作。

 <CommonPopup           
          open={this.state.showConfirmCancelOrderPrompt}
          onRequestNo={this.togglePopup}
          onRequestYes={this.props.cancelOrder}
  />

组件2 - 使用弹出和单击“是”按钮，导航到URL为href = {${someURL}?employeeNumber=${employeeNumber}}

注意：数据 - someURL和employeeNumber将通过上下文传递

我怎样才能在两个场景中使用我的组件？

Answer 1

你试过这个吗？

<MyButton to="user" />
class MyButton extends React.Component{
    render() { return <Link to={this.props.to} />; }
}

Answer 2

尝试在window.location = <your url>调用的函数中设置onClick。这应该够了吧。或者，使用window.open(<your url>)。

用你想要的网址替换<your url>。

编辑：尝试这样的事情：

onClick={this.openUrl}

然后，定义这样的函数：

openUrl() {
  url = this.props.theUrl + "?employeeNumber=" + this.props.theEmployeeNumber;
  window.open(url);
}

Answer 3

所以答案是，在组件2中，

<ContentContext.Consumer>
                    {({ someURL, employeeNumber }) => (
                        <CommonPopup
                            open={this.state.showConfirmCancelOrderPrompt}
                            onRequestClose={this.togglePopup.bind(this)}
                            onRequestYes={() => 
                                               this.handleSearch(someURL,employeeNumber)}
                        />
                    )}
                </ContentContext.Consumer>

并在功能：

handleSearch = (someURL, employeeNumber) => {
        this.props.history.push(`${someURL}?employeeNumber=${employeeNumber}`);
           };