score:3

Accepted answer

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;

score: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

score: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.

Related Query

More Query from same tag