Question

我有一个看起来像这样的反应应用程序：当它点击它时我有一个按钮它会打开一个带有要打印的票证的弹出窗口，点击处理程序从父组件传递到按钮而我希望在父组件内完成相同的过程

export default class ParentComponent extends Component {
  openWindow = id => {
    window.open('/service/ticket/' + id + '/print')
  }

  submitPayment = () => {
    sendPayment(this.state.rawCommand.id, updatedCommand.payment) 
      .then(payment => {
        if (payment.needed > 0) { 
          toastr.success(dictionnary.acceptedPayment)
        } else {
          toastr.success(dictionnary.payee) 
          this.openWindow(updatedCommand.id)
        } 
      }

  render () {
    <Printer printTicket={this.openWindow} />
  }
}

和

const Printer = ({printTicket, id}) => {
  const clickHandler = () => printTicket(id)

  return (
    <button onClick={clickHandler}>print</button>
  )
}

问题是当单击Printer组件中的按钮时，窗口按预期打开，但是当从父组件调用openWindow单击处理程序时，没有任何事情发生！

我检查了chrome devtools中的代码并调用了该函数但弹出窗口没有打开。

修改更多解释： 1-该按钮打开带有故障单的弹出窗口并打印出来 2-用户可以通过此按钮打印票证 3-提交付款后，机票应自动打印

Answer 1

我找到了关于谷歌浏览器的解决方案：它会阻止弹出窗口!!!

window.open（）不参与反应应用程序

1 个答案: