2

Following is my code snippet

Child Class function (handleClick)

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  handleClick() {
    alert("this and that")
  }
  render() {
    return (
      <button whenClicked={this.handleClick} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

Parent Class

export class Dropdown extends Component {
  render() {
    return (
      <div className="dropdown">
        <Badge onClicked={this.props.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

In above code whenever I try to call handleClick function in child class it is not working.

Improve this question
2
  • Event handler for click event is onClick. You can't name it anything you want. Also, what are you trying to do with this ? The event handler should be define in Dropdown class Commented Apr 1, 2016 at 20:09
  • You have these labeled backwards... the Badge is the child component, and the Dropdown is the parent component. So you want the Dropdown to handle a click on the button in Badge? Commented Apr 1, 2016 at 20:38

3 Answers 3

Reset to default
3

You got parent and child mixed up. The Dropdown component renders the Badge component, so Dropdown is the parent class. Also the Event handler is called onClick.

Here's the code (in ES5):

Dropdown

var React = require('react');
var Badge = require('./Badge.react');

var Dropdown = React.createClass({

    whenClicked: function() {
        console.log('blabla');
    },

    render: function () {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret"
                subTitle="subTitle" />
            </div>  
        );
    }
});

module.exports = Dropdown;

Badge

var React = require('react');

var Badge = React.createClass({

    render: function () {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button> 
        );
    }
});

module.exports = Badge;

And in ES6:

Badge

import React from 'react';

class Badge extends React.Component {
    handleClick() {
        this.props.whenClicked();
    }
    render() {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button>
        );
    }
}

module.exports = Badge;

Dropdown

import React from 'react';
import Badge from './Badge.react';

class Dropdown extends React.Component {
    whenClicked() {
        console.log('blabla');
    }

    render() {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default"
                title={this.props.title} subTitleClassName="caret" subTitle="subTitle"/>
            </div>
        );
    }
}

module.exports = Dropdown;
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How to perform same thing in ES6?
es6 does automatically bind the class to non react functions so if you wanted to access this inside whenClicked() you would need to set the prop like whenClicked={this.whenClicked.bind(this)}
2

As pointed out by others, the correct name for the click event attribute is onClick (not whenClick).

Badge (Child):

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  render() {
    return (
      <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

Which leads me to wonder: Where is your this.props.whenClicked defined, which you want to pass from Dropdown into Badge?

I imagine you want to define it in Dropdown as well and pass it in as this.whenClicked.

Dropdown (Parent):

export class Dropdown extends Component {
  whenClicked(event) {
      // Your event handler
  },
  render() {
    return (
      <div className="dropdown">
        <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

To recap:

  1. Your whenClicked is defined in Dropdown and passed as a property into the Dropdown instance..
  2. In badge, you define a onClick listener called handleClick which calls the whenClicked that you passed from Dropdown.
Improve this answer

2 Comments

Actually what I am doing is this 1. Setting up my Badge as reusable component therefore I set whenClicked in it so that I call it in Dropdown with the help of props. 2. I'm able to perform same in ES5 but facing problem in ES6. 3. @weigel able to perform what I want in ES5 but I how to do in ES6.
Thank you for the explanation, though I'm not entirely sure what you mean, as I don't see a huge difference between my solution and weigels solution. I have simplified it slightly in the hope that this will help to clarify. Let me know if this is (not) what you need :)
0
  1. The dropdown class should define the action that will be called when badge is clicked.
  2. You need to pass a delegate to this function as a property to the badge. You can call the properly whatever you want.
  3. In the badge class you need to change the 'whenClicked' to onClick and pass the this.props.theNameOfTheFunction
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.