React event not firing in React Component

Question

Here is my react code. I seen several examples for calling a function and I am having no luck. I have my app.js folder rendering the NavigationDiv to HTML in a separate folder, everything is displaying even the button but when I click on it nothing happens.

This was a close post to mine: React events not firing but mine still is not firing. If I put {this.fireEvent()} I can get it to fire once but not again. Thank you in advance!

var React = require('react');

var NavigationDiv = React.createClass({
  getInitialState: function()
  {
    return {liked: false};
  },

  handleClick: function(event)
  {
    this.setState({
      liked: !this.state.liked
    });
  },

  fireEvent:function()
  {
    console.log("am i being clicked" );
  },

  render: function()
  {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <button onClick={this.fireEvent}>
        You Click to toggle. {text}
      </button>
    );
  }
});

module.exports = NavigationDiv;

Why don't you do <button onClick={this.handleClick}>? It should work this way. — Cristik
– Cristik, Commented Apr 29, 2015 at 23:48
Works for me now -> jsfiddle.net/adeneo/69z2wepo/7391 (and.. I removed the parentheses from the return statement) — adeneo
– adeneo, Commented Apr 29, 2015 at 23:56
I am not able to get anything still.. If it was my react setup would I not be getting any react to work? — JMStudios.jrichardson
– JMStudios.jrichardson, Commented Apr 30, 2015 at 0:05

GreyMana · Accepted Answer · 2017-08-25 20:31:06Z

1

I had the same issue when using the modal dialog in SharePoint.

React seems to require the complete event bubbling while a parent element had a click handler with a "stopPropagation" call in it, resulting that no click events where handled in the dialog.

For a hack you can add SP.UI.Dialog.$z = function () {}; somewhere to suppress those handler attachments, but the clearer way is to re-implement the modal dialog on your own.

answered Aug 25, 2017 at 20:31

GreyMana

2713 silver badges4 bronze badges

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

Comments

Oz Lodriguez · Accepted Answer · 2015-06-24 18:45:54Z

I have made a couple of edits, but not too much. Just added React.render at the end of your script tag and made a callback to change the text. Which version of React are you running?

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.1.js"></script>
  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="test"></div>
  <script type="text/jsx">

    var NavigationDiv = React.createClass({
    getInitialState: function () {
        return {
            liked: false
        };
    },

    handleClick: function (event) {
        this.setState({
            liked: !this.state.liked
        });
    },

    fireEvent: function () {
        alert("am i being clicked");
        this.handleClick();
    },

    render: function () {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
        return ( 

     <button onClick = {this.fireEvent} > You Click to toggle. {text} </button>

    );
  }
});

React.render(<NavigationDiv /> , document.body);


  </script>
</body>
</html>

I have also hooked up the update to the toggle text when the function callback was called for event fired

working example is here http://jsbin.com/yoseqo/edit?html,output

Frazer Kirkman · Accepted Answer · 2016-09-20 07:09:31Z

0

having <button onClick={this.fireEvent()}> will call fireEvent when the component is rendered, and bind the return from that event (nothing) to the onClick function.

You might want to try

<button onClick={this.fireEvent.bind(this)}>

or

<button onClick={() => {this.fireEvent()}}>

answered Sep 20, 2016 at 7:09

Frazer Kirkman

1,2041 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

React event not firing in React Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related