Passing event + arguments in an event handler callback

Question

I can successfully pass an argument from an event handler with the code below.

But I wonder, how would I as well pass the event to the function handleDown?

class Parent extends React.Component {
    handleDown(argumentOne) {
    }
  render () {
    return (
      <div>
        <Child 
            handleDown={this.handleDown.bind(this)}
        />
      </div>
    );
  }
}

class Child extends React.Component {
    constructor(props) {
    super(props);
    }
  render () {
    return (
      <div>
        <span
            onMouseDown={this.props.handleDown.bind(this, 'argumentOne')}
        >
        Click here
        </span>
      </div>
    );
  }
}

Btw, super(props) is unnecessary unless you need access to props inside of the constructor. Just in case you don't know. — user6445533
– user6445533, Commented Sep 10, 2016 at 9:11

T.J. Crowder · Accepted Answer · 2016-09-10 09:04:38Z

3

how would I as well pass the event to the function handleDown?

You don't, the event mechanism does, but given the code in the question, handleDown will receive the event as the first argument after the ones you've provided.

So here:

<Child 
    handleDown={this.handleDown.bind(this)}
/>

it would be the first argument to handleDown, and here:

<span
    onMouseDown={this.props.handleDown.bind(this, 'argumentOne')}
>

it would be the second argument to handleDown.

I'd probably modify the first bind call to pass null or something so that you consistently get it as the second argument. But unless React does something special, it will always be the last argument, so you could work from that.

answered Sep 10, 2016 at 9:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing event + arguments in an event handler callback

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related