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" 并处理来自组件本身的点击事件。

更新： 找到了一个解决方案，但仍然感觉像是一个反模式...

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

感谢帮助...

Answer 1

我希望在模型中创建两个处理函数：

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


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

Answer 2

您不能在 <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 >
        );
    }
};

React.js: 如何在将变量传递给点击函数时使用同一个按钮

React.js: How to use the same button while passing variables to a click function

javascript

reactjs

material-ui