[英]Onclick event handler with passing this in reactjs
My component is as below: 我的组件如下:
import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
render() {
return (
<div className="col-md-12 slide-row">
<div className="col-md-12 overview-about-property">
<div className="expandabletext less">
<div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
</div>
<div className="showmore"> Show More </div>
</div>
</div>
);
}
}
I want to call function say showmorefunct() passing clicked handler like this in jquery. 我想调用函数说showmorefunct()传递在jquery中这样的单击处理程序。 How can I do this? 我怎样才能做到这一点?
You can bind you function and pass params which you want, if you want to. 您可以绑定函数,并根据需要传递参数。 You can do something like : 您可以执行以下操作:
class Test extends React.Component {
handleClick(param, e){
console.log(e);
console.log(param);
}
render(){
return (
<div className="showmore" onClick={this.handleClick.bind(this, "Some param if you need it")}> Show More </div>
)
}
}
React.render(<Test />, document.getElementById('container'));
UPDATE http://jsfiddle.net/jwm6k66c/1517/ 更新 http://jsfiddle.net/jwm6k66c/1517/
I don't quite really understand your question, but I imagine you want this- 我不太了解您的问题,但我想您想要这个-
import React, {PropTypes} from 'react';
export default class Viewdesc extends React.Component {
constructor(props) {
super(props)
this.showMoreFunct = this.showMoreFunct.bind(this)
}
showMoreFunct() {
alert('Show more clicked!')
}
render() {
return (
<div className="col-md-12 slide-row">
<div className="col-md-12 overview-about-property">
<div className="expandabletext less">
<div className="col-md-12" dangerouslySetInnerHTML={{__html: this.props.record.ABOUT}}></div>
</div>
<div className="showmore"> <span onClick={this.showMoreFunct}>Show More</span> </div>
</div>
</div>
);
}
}
You can replace span
with a
or button
. 您可以将span
替换a
或button
。 You just need to specify the function you want to call to onClick
prop. 您只需要指定要调用onClick
prop的函数即可。 React will call it automatically when the user clicks on that span
. 当用户单击该span
时,React将自动调用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.