javascript - React.js: How to use the same button while passing variables to a click function -

i using material-ui ui framework , trying create view 2 buttons have different values.

  render: function() {      return        <card>         <cardmedia overlay={<cardtitle title={this.props.title} />}>           <img src={this.props.image}/>         </cardmedia>         <cardactions>           <flatbutton onclick={this._handleclick} label="good"/>           <flatbutton onclick={this._handleclick} label="bad"/>         </cardactions>       </card> 

since new react think miss basic. how can pass values flatbutton, can use "ref" attribute? main problem using framework. if had written components use props, such "label" , handle click event component itself.

update: found solution, still if feels anti-pattern...

      <flatbutton onclick={this._handleclick.bind(this, 1)} label="good"/>       <flatbutton onclick={this._handleclick.bind(this, 0)} label="bad"/> 

appreciate help...

you cannot call onclick on <button /> can pass function onclick defined inside class. need communicate handleclick child component through props

hope it.

class cardactions extends react.component {  ... }  class flatbutton extends react.component {     constructor(props) {       super(props);     }      render() {         return (             <button onclick={() => this.props.whenclicked() } type="button">                 {this.props.label}             </button>         );     } }   class cards extends react.component {     constructor(props) {       super(props);     }      handleclick(event) {         alert('click');     }      render: function () {          return (             <cardactions>                 <flatbutton whenclicked={(event) => this.handleclick(event)} title="dropdown" />             </cardactions >         );     } };