How to pass event in onClick in ReactJS

Question

I am trying to to call "preventDefault" in some manner on a custom component without success. Here are my attempts. The first attempt with "e" passes the element reference and not the actual event. The second method passes the event, but the prevent default method does not prevent anything. What is the best way to do this?

<MyComponent header= {
    <div onClick={e => { e.preventDefault(); myFunction.bind(this, event) }}>
       Header
    </div> 
} />

function myFunction(event) {
   event.preventDefault();
}

If you end doing something like this, keep looking, because there should be a better way — Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy, Commented Oct 11, 2016 at 17:13
@notgiorgi - I am already using "Children" for another jsx property, so I did not have any other place left to pass the header jsx. — Lambert
– Lambert, Commented Oct 11, 2016 at 18:20

tobiasandersen · Accepted Answer · 2016-10-11 17:21:50Z

1

I would do it like this:

<MyComponent header={<div onClick={myFunction}>Header</div>} />

function myFunction(event) {
   event.preventDefault();
}

Or, if you need to use this in the click handler:

class App extends React.Component {
  myFunction = (event) => {
    event.preventDefault();
    this.setState({ clicked: true });
  }

  render () {
    return (
      <MyComponent header={<div onClick={this.myFunction}>Header</div>} />
    )
  }
}

edited Oct 11, 2016 at 17:21

answered Oct 11, 2016 at 16:56

tobiasandersen

8,6783 gold badges32 silver badges40 bronze badges

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

4 Comments

tobiasandersen Over a year ago

The fat arrow (=>) does this for you. But if you can't use ES6 features yet, you'd have to bind it explicitly...

Lambert Over a year ago

@tobiasandersen - When I do it this way, a reference to the element gets passed to "myFunction", not the actual event. Is that because my function is outside the class?

tobiasandersen Over a year ago

No it doesn't matter. Are you doing it like this: jsfiddle.net/ybv6mtg0?

Lambert Over a year ago

@tobiasandersen - Kind of, except I am using typescript instead of javascript.

Collectives™ on Stack Overflow

How to pass event in onClick in ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related