![](/img/trans.png)
[英]Is there a way to use Canvas to draw something on the click of a button with react.js?
[英]React.js: How to use the same button while passing variables to a click function
我正在使用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"/>
感谢帮助...
您不能在<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 >
);
}
};
我希望在模型中创建两个处理函数:
handleGood: function() {},
handleBad: function() {},
<FlatButton onClick={this.handleGood} label="Good"/>
<FlatButton onClick={this.handleBad} label="Bad"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.