我使用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"/>
感谢帮助...
答案 0 :(得分:1)
你不能在<button />
上调用onClick,但你可以将一个函数传递给它在Class
内定义的onClick。您需要通过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 >
);
}
};
答案 1 :(得分:0)
我更喜欢在模型中创建两个处理函数:
handleGood: function() {},
handleBad: function() {},
<FlatButton onClick={this.handleGood} label="Good"/>
<FlatButton onClick={this.handleBad} label="Bad"/>