React.js：如何在將變量傳遞給click函數時使用相同的按鈕

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

您不能在<button />上調用onClick，但可以將函數傳遞給在Class定義的onClick。 您將需要通過props將handleClick與其子組件進行通信

希望你能明白。

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

我希望在模型中創建兩個處理函數：

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


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