React.js：如何在将变量传递到点击函数时使用相同的按钮

Question

我正在使用material-ui作为UI框架，并且我尝试使用两个具有不同值的按钮创建视图。

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> 

由于我是新来的反应我觉得我会错过一些基本的东西。我如何将值传递给FlatButton，我可以使用“ref”属性吗？我的主要问题是我正在使用一个框架。如果我编写了这些组件，我只会使用道具，比如“label”，并处理组件本身的click事件。

更新：找到了解决办法，但如果仍感觉像一个反模式...

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

感激的帮助......

Answer 1

不能调用的onClick上<button />，但你可以通过一个函数来其的onClick其定义我它的Class。您需要通过props

将您的​​与其子组件通讯。希望你能得到它。

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 > 
     ); 
    } 
}; 

Answer 2

我prefere创建两个处理功能模型：

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


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