onClick button event handler not working when using react.js JSX pages

Question

onClick button event handler not working when using react.js JSX pages

2.8k views Asked by Sourav At 14 August 2016 at 10:33

I am trying to build a web app where I am trying to call a function on button click. I am using react-engine as templating engine using JSX pages. Below is my layout.jsx page

import React from 'react';
import Success from "./components/success.jsx"; 
import ReactDOM from 'react-dom'; 

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Layout';
        this.state = {data:[]};
        //this.arrayHandler = this.arrayHandler.bind(this);
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
        this.printHandler = this.printHandler.bind(this);

    }

    /*function submitter(){
        //console.log("in submitter function", user.value);
    },*/
    /*arrayHandler(){
        var item = "first item";
        var myArray = this.state.data;
        myArray.push(item);
        this.setState({data:myArray})
    }*/

    forceUpdateHandler(){
        return this.forceUpdate();
    }

    printHandler(){
        return this.displayName = "Sourav";
    }

    render() {
        return (
            <html>
                <head>
                    <title>JSX</title>
                </head>

                <body>
                    <h1>Welcome to React JSX Page</h1>
                    <div id = "maincontent">

                        <Message msg = "Displaying message"/> 
                        <p id = "para"></p> 
                        <Success successMsg = "Transaction successful"/>
                        <h2>Arrays: {this.props.propArray}</h2>
                        <h2>Objects: {this.props.propObject.objectName1}</h2>

                        <input type = "button" onClick = {this.props.propHandler} value = "Add items"/>
                        <h3>State Arrays: {this.state.data}</h3>

                        <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
                        <h4>Random number: {Math.random()}</h4>

                        <button onClick = {this.printHandler}>Show name</button>
                        <p>{this.displayName}</p>

                    </div>
                </body>

            </html>
            );
    }
}

Layout.propTypes = {
    propArray: React.PropTypes.array.isRequired,
    propObject: React.PropTypes.object,
    propHandler: React.PropTypes.func
}

Layout.defaultProps = {
    propArray: [1,2,3,4,5],
    propHandler: function arrayHandler(){
                    var item = "first item";
                    var myArray = this.state.data;
                    myArray.push(item);
                    this.setState({data:myArray})
                },
    propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}

class Message extends React.Component{
    render(){
        return(
            <div>
                <h2>{this.props.msg}</h2>
            </div>
            )
    }
}



//ReactDOM.render(<Layout/>, );


export default Layout;

i have tried calling the function using both this.props as well as calling directly after binding this to it. However, both the approaches did not work.

Could you please help me with this. I am totally stuck here.

Original Q&A

There are 1 answers

**Praveen Prasad** · Answer 1 · 2016-08-14 13:06:57

I am assuming you know how to do the react setup thing etc. This is how events are bound and eventually change DOM elements.

Problem in your code is you trying to update a property on component this.displayName = "Sourav" and hoping that UI will automatically get updated based on that. But that's not the way React works. To display changes you need to change a component's state or props (props are set through parent component). Also you don't write head, html body tags etc inside react component.

import React, {PropTypes} from 'react';

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.updateName1 = this.updateName1.bind(this);
    this.updateName2 = this.updateName2.bind(this);

    this.state = {
      name1: undefined
    }
  }

  updateName1(){
    this.setState({
      name1: 'Praveen'
    });
  }


  updateName2(){
    this.name2 = "I won't be updated on UI"
  }

  render() {
    return (<div>
      <button onClick={this.updateName1}>Update Name1</button> ||
      <button onClick={this.updateName2}>Update Name2</button>
      <br />
      <div>
        Name1: {this.state.name1} <br />
        Name2: {this.name2}  <br />
      </div>
    </div>);
  }
}

MyComponent.propTypes = {
};

TechQA.

onClick button event handler not working when using react.js JSX pages

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in NODE.JS

Related Questions in REACTJS

Related Questions in REACT-ENGINE

Popular Questions

Popular Tags

Trending Questions