React event not firing in React Component

1
votes

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;
3
javascriptreactjs
Why don't you do <button onClick={this.handleClick}>? It should work this way. - Cristik
@Cristik That doesn't work. - JMStudios.jrichardson
Works for me now -> jsfiddle.net/adeneo/69z2wepo/7391 (and.. I removed the parentheses from the return statement) - adeneo
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
I have no idea, I just got it working in the Fiddle ? - adeneo

3 Answers

1
votes

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.

0
votes

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

0
votes

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()}}>