javascript - ReactJS 区分来自多个组件的点击。

Question

我有一个带有两个按钮的网络界面:

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

和一些处理代码:

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

消除 handleGreenSquareOn 和 handleGreenSquareOff 函数的最佳方法是什么？

有没有办法在 JSX 代码中为 onClick 回调设置参数？

Answer 1

您可以像这样将参数传递给handleGreenSquare:onClick={this.handleGreenSquare.bind(this, true)}

这是一个可以玩的jsfiddle: 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);