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

Question

I am using material-ui as a UI framework and I am trying to create a view with two buttons that 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 I am new to react I think that I miss something basic. How can I pass values to FlatButton, can I use the "ref" attribute? My main problem is that I am using a framework. If I had written those components I would just use props, such as "label" and handle the click event from the component itself.

Update: found a solution, but still if feels like an anti-pattern...

      <FlatButton onClick={this._handleClick.bind(this, 1)} label="Good"/>
      <FlatButton onClick={this._handleClick.bind(this, 0)} label="Bad"/>

Appreciate the help...

STEEL · Accepted Answer · 2016-04-18 05:22:58Z

1

You cannot call onClick on <button /> but you can pass a function to its onClick which is defined inside its Class. You will need to communicate your handleClick to its Child component through props

Hope you get 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 >
        );
    }
};

edited Apr 18, 2016 at 5:22

answered Nov 3, 2015 at 5:59

STEEL

10.3k10 gold badges76 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TSV · Accepted Answer · 2015-11-01 13:48:00Z

0

I'd prefere to create two handling functions in the model:

handleGood: function() {},
handleBad: function() {},


<FlatButton onClick={this.handleGood} label="Good"/>
<FlatButton onClick={this.handleBad} label="Bad"/>

answered Nov 1, 2015 at 13:48

TSV

7,6681 gold badge33 silver badges39 bronze badges

1 Comment

TSV Over a year ago

If you have duplicated code in these two functions, you can refactor shared code into another function and call it from good/bad handlers...

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related