CODEWITHSUNDEEP
javascriptreactjs
prabalsingh
prabalsingh

Reputation: 23

onClick not wokring in React

'onClick' is not working right now.Can somebody help me with this? I've removed all the unneccesary things. I should be getting message 'inside this was clicked' but I am not getting it. 


import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil, isNil as _isNil} from 'lodash';
import request from "superagent-bluebird-promise";
import SearchField from "./parts/search-field";
import SearchResults from "./parts/search-results";


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row, ButtonGroup, DropdownButton, MenuItem, Pager} = bootstrap;
const {formatDate} = utilsHelper;

class RevisionsPage extends React.Component {
    constructor(props) {
        super(props);
        this.thisWasClicked = this.thisWasClicked.bind(this);
    }

    thisWasClicked(event) {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={this.thisWasClicked}>working?</h1>
            </div>
        );
    }
}


export default RevisionsPage;

Upvotes: 1

Views: 72

Answers (6)

Ayyappa Gollu
Ayyappa Gollu

Reputation: 966

it's working for me. i copied same code from your question,alert working demo in codesandbox perhaps something to do with other removed code?

Upvotes: 0

Burak Gavas
Burak Gavas

Reputation: 1354

Did you make sure that you did not block the alerts for the webpage that you are working on? Close the browser tab and open again to test it. Or just write console.log("Test"); to test if your button functions properly.

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

Here is example of both bind and arrow function

export default class App extends Component {
  constructor(props) {
    super(props);
    this.thisWasClicked = this.thisWasClicked.bind(this);
  }
  thisWasClicked(event) {
    alert("inside this was Clicked");
  }
  handleClick = e => {
    alert("Arrow Clicked");
  };
  render() {
    return (
      <div className="App">
        <h1 onClick={this.thisWasClicked}>working?</h1>
        <h2 onClick={this.handleClick}>Arrow</h2>
      </div>
    );
  }
}

Upvotes: 0

ankitkanojia
ankitkanojia

Reputation: 3122

You should try arrow function rather than bind method, ES6 provides the best way to event bind using an arrow function.

Please try below code using the arrow function

import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil, isNil as _isNil} from 'lodash';
import request from "superagent-bluebird-promise";
import SearchField from "./parts/search-field";
import SearchResults from "./parts/search-results";


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row, ButtonGroup, DropdownButton, MenuItem, Pager} = bootstrap;
const {formatDate} = utilsHelper;

class RevisionsPage extends React.Component {

    constructor(props) {
        super(props);
    }

    thisWasClicked = (event) => {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={this.thisWasClicked}>working?</h1>
            </div>
        );
    }
}


export default RevisionsPage;

Upvotes: 1

Hurobaki
Hurobaki

Reputation: 4058

Actually your code is working I've create fiddle

But the .bind() method is the old way to bind this to an event. Now you would use an arrow function

class RevisionsPage extends React.Component {

    thisWasClicked = (event) => {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={this.thisWasClicked}>working?</h1>
            </div>
        );
    }
}

It makes your constructor become useless. So you get a shorter code.

I hope it helps !

Upvotes: 0

Dominik Matis
Dominik Matis

Reputation: 2146

Maybe arrow function will help you:

import * as bootstrap from 'react-bootstrap';
import * as utilsHelper from '../../helpers/utils';

import {genEntityIconHTMLElement, getEntityLabel} from '../../helpers/entity';

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import {isNil, isNil as _isNil} from 'lodash';
import request from "superagent-bluebird-promise";
import SearchField from "./parts/search-field";
import SearchResults from "./parts/search-results";


const {Alert, Button, Col, Grid, ListGroup, ListGroupItem, Row, ButtonGroup, DropdownButton, MenuItem, Pager} = bootstrap;
const {formatDate} = utilsHelper;

class RevisionsPage extends React.Component {
    constructor(props) {
        super(props);
    }

    thisWasClicked = () => {
        alert("inside this was Clicked");
    }

    render() {
        return (
            <div id="revisionPage">
                <h1 onClick={() => this.thisWasClicked()}>working?</h1>
            </div>
        );
    }
}


export default RevisionsPage;

Upvotes: 0

Related Questions