0

I have a web interface with two buttons:

<Panel header="Green Square">
  <ButtonToolbar>
    <Button bsStyle="info" onClick={this.handleGreenSquareOn}><Glyphicon glyph="ok-circle"/> On</Button>
    <Button bsStyle="info" onClick={this.handleGreenSquareOff}><Glyphicon glyph="remove-circle"/> Off</Button>
  </ButtonToolbar>
</Panel>

and some handling code:

handleGreenSquareOn: function() { return this.handleGreenSquare(true); },
handleGreenSquareOff: function() { return this.handleGreenSquare(false); },
handleGreenSuqare: function(value) {
  // do stuff
},

What's the best way to eliminate the handleGreenSquareOn and handleGreenSquareOff functions?

Is there a way of setting an argument for an onClick callback in the JSX code?

3 Answers 3

5

You can just pass an argument to handleGreenSquare like this: onClick={this.handleGreenSquare.bind(this, true)}

Here is a jsfiddle to play with: http://jsfiddle.net/nilgundag/wsdr48ro/

/** @jsx React.DOM */

var Hello = React.createClass({
        handleGreenSquare: function(value) {
          console.log(value);
        },
    render: function() {
        return <ReactBootstrap.Navbar brand="Whoops">
               <ReactBootstrap.Panel header="Green Square">
                     <ReactBootstrap.ButtonToolbar>
            <ReactBootstrap.Button bsStyle="info" onClick={this.handleGreenSquare.bind(this, true)}><ReactBootstrap.Glyphicon glyph="ok-circle"/> On</ReactBootstrap.Button>
            <ReactBootstrap.Button bsStyle="info" onClick={this.handleGreenSquare.bind(this, false)}><ReactBootstrap.Glyphicon glyph="remove-circle"/> Off</ReactBootstrap.Button>
          </ReactBootstrap.ButtonToolbar>

            </ReactBootstrap.Panel>
        </ReactBootstrap.Navbar>;
    }
});

React.renderComponent(<Hello />, document.body);
5
  • I had forgotten that bind could be used for more than just setting this. Excellent answer, thanks.
    – fadedbee
    Oct 8, 2014 at 12:54
  • This works great, but I recently moved to using a handler generator instead of binding because binding, IMO, looks a bit ugly in the onClick={}. So for example you make a function called handleClickGenerator which takes an argument of foo and returns a handler function like return function(e) {...}. Then in your JSX just do `onClick={this.handleClickGenerator('bar')} and you can access the var inside the handler function and perform logic, or whatever. Oct 8, 2014 at 22:45
  • @Mike that would create a new handler function on each click event wich seems inefficient. Why not re-use one handler and do the logic inside the handler function instead? Oct 9, 2014 at 9:32
  • @David we're talking about extremely negligible inefficiency for substantially increased code readability in my opinion. Also, .bind() isn't free either. Oct 9, 2014 at 16:16
  • @Mike I agree that .bind() is practically the same. I prefer to keep DOM event handlers consistent in all components, because then I don’t have to look around to know how it works. It’s essentially a design decision, as you say. Oct 10, 2014 at 9:46
3

Modifying the handler’s arguments will also remove the event object (unless you pass it manually). I would keep the handlers intact for consistency, but that’s a design choice.

Another options is to add a data attribute and check it inside the handler:

handleGreenSquare: function(e) {
  var value = e.currentTarget.getAttribute('data-value') == 'on';
}

[...]

<Button data-value="on" key="on" bsStyle="info" onClick={this.handleGreenSquare}><Glyphicon glyph="ok-circle"/> On</Button>
<Button data-value="off" key="off" bsStyle="info" onClick={this.handleGreenSquare}><Glyphicon glyph="remove-circle"/> Off</Button>
1

The callbacks on events will provide the data-reactid as a second variable

So if you alter your function like so:

handleGreenSuqare: function(value, reactId) {
  // do stuff with reactId
},

you can parse the reactId which are the component keys concatenated by dots.

If you give your button a key attribute like so:

<Panel header="Green Square">
  <ButtonToolbar>
    <Button key="on" bsStyle="info" onClick={this.handleGreenSquareOn}><Glyphicon glyph="ok-circle"/> On</Button>
    <Button key="off" bsStyle="info" onClick={this.handleGreenSquareOff}><Glyphicon glyph="remove-circle"/> Off</Button>
  </ButtonToolbar>
</Panel>

your reactId variable will somewhat look like this for the off button:

.0.0.1.0.1.$off

inlining the function might be more more expressive, depending on what you are trying to do.

<Panel header="Green Square">
  <ButtonToolbar>
    <Button bsStyle="info" onClick={function() {return this.handleGreenSquare(true);}}><Glyphicon glyph="ok-circle"/> On</Button>
    <Button bsStyle="info" onClick={function() {return this.handleGreenSquare(false);}}><Glyphicon glyph="remove-circle"/> Off</Button>
  </ButtonToolbar>
</Panel>

If you use the es6 harmony features of the jsx compiler, this looks nice and expressive:

<Panel header="Green Square">
  <ButtonToolbar>
    <Button key="on" bsStyle="info" onClick={() => this.handleGreenSquare(true)}><Glyphicon glyph="ok-circle"/> On</Button>
    <Button key="off" bsStyle="info" onClick={() => this.handleGreenSquare(false)}><Glyphicon glyph="remove-circle"/> Off</Button>
  </ButtonToolbar>
</Panel>
2
  • Cool, but I wouldn't actually recommend this, and reactid may be going away very soon.
    – Brigand
    Oct 8, 2014 at 18:52
  • I fully agree, using a function with .bind or inlining is much better, should have made more clear that it is probably not a smart idea.
    – Retozi
    Oct 8, 2014 at 20:45

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.