javascript - window.open() don't work in react application - Stack Overflow

admin管理员组

文章数量:1327988

I have a react application that looks like this: I have a button when it's clicked it will open a popup with a ticket to be printed, the click handler is passed from a parent ponent to the button and I want the same process to be done inside the parent ponent

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} />
  }
}

and

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

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

The problem is when the button in the Printer ponent is clicked the window is opened as expected, but when the openWindow click handler is invoked from the parent ponent nothing is happening!

I inspected the code in chrome devtools and the function is invoked but the popup does not open.

Edit More explanation: 1- the button opens a popup with a ticket and print it 2- the user can print a ticket via this button 3- after submitting a payment the ticket should be printed automaticaly

I have a react application that looks like this: I have a button when it's clicked it will open a popup with a ticket to be printed, the click handler is passed from a parent ponent to the button and I want the same process to be done inside the parent ponent

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} />
  }
}

and

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

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

The problem is when the button in the Printer ponent is clicked the window is opened as expected, but when the openWindow click handler is invoked from the parent ponent nothing is happening!

I inspected the code in chrome devtools and the function is invoked but the popup does not open.

Edit More explanation: 1- the button opens a popup with a ticket and print it 2- the user can print a ticket via this button 3- after submitting a payment the ticket should be printed automaticaly

• javascript
• reactjs
• dom-events

Share Improve this question Follow edited Jun 3, 2021 at 8:49 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 21, 2017 at 9:23 zied hajsalahzied hajsalah 57611 gold badge66 silver badges1717 bronze badges 8

• I'd expect to see a ReferenceError for mandId on the console with that code. – Quentin Commented Apr 21, 2017 at 9:24
• it's a typo in the question only thank you! – zied hajsalah Commented Apr 21, 2017 at 9:26
• How are you invoking submitPayment? – Pineda Commented Apr 21, 2017 at 9:28
• submitPayment is passed as props to another ponent and when it's invoked it does an ajax call which returns a Promise, and when the Promise is resolved it calls this.openWindow. – zied hajsalah Commented Apr 21, 2017 at 9:31
• 'but when the openWindow click handler is invoked from the parent ponent nothing is happening', where is the code that invoked it within the parent and not a child ponent? – Pineda Commented Apr 21, 2017 at 9:46

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

I found the solution it's about google chrome: it blocks the popup!!!

本文标签： javascriptwindowopen() don39t work in react applicationStack Overflow