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