0

UI フレームワークとして material-ui を使用しており、異なる値を持つ 2 つのボタンを持つビューを作成しようとしています。

  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」属性を使用できますか? 私の主な問題は、フレームワークを使用していることです。これらのコンポーネントを作成した場合は、「ラベル」などの小道具を使用して、コンポーネント自体からクリック イベントを処理します。

更新：解決策を見つけましたが、それでもアンチパターンのように感じます...

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

助けてくれてありがとう...

4

2 に答える 2

1

onClick を呼び出すことはできませんが<button />、その onClick 内で定義されている関数をその onClick に渡すことができますClass。handleClickを介して子コンポーネントに通信する必要があります。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 >
        );
    }
};
于 2015-11-03T05:59:01.067 に答える
0

モデルに 2 つの処理関数を作成したいと思います。

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


<FlatButton onClick={this.handleGood} label="Good"/>
<FlatButton onClick={this.handleBad} label="Bad"/>
于 2015-11-01T13:48:00.750 に答える