如何使用公共组件中的按钮作为href并在React中使用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-使用弹出窗口并单击“是”按钮，导航到具有href = { ${someURL}?employeeNumber=${employeeNumber} }的URL

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

如何在两种情况下都使用我的组件？

Answer 1

你试过这个吗？ <MyButton to="user" /> class MyButton extends React.Component{ render() { return <Link to={this.props.to} />; } }

Answer 2

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

将<your url>替换为所需的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}`);
           };