我知道在 vanilla JavaScript 中,我们可以这样做:
onclick="f1();f2()"
onClick
在 ReactJS 中进行两个函数调用的等价物是什么?
我知道调用一个函数是这样的:
onClick={f1}
我知道在 vanilla JavaScript 中,我们可以这样做:
onclick="f1();f2()"
onClick
在 ReactJS 中进行两个函数调用的等价物是什么?
我知道调用一个函数是这样的:
onClick={f1}
将您的两个以上函数调用包装在另一个函数/方法中。以下是该想法的几个变体:
1) 分离法
var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
或使用 ES6 类:
class Test extends React.Component {
onClick(event) {
func1();
func2();
}
render() {
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
}
2) 内联
<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>
或 ES6 等效项:
<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>
也许您可以使用箭头函数 (ES6+) 或简单的旧函数声明。
普通函数声明类型(非 ES6+):
<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>
匿名函数或箭头函数类型 ( ES6+ )
<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>
第二条是我所知道的最短的路。希望对你有帮助!
在 onClick 上为任何元素调用多个函数,您可以创建一个包装函数,类似于这样。
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
这些函数可以定义为父类上的方法,然后从包装函数调用。
你可能有主要的元素会像这样导致 onChange,
<a href='#' onClick={this.wrapperFunction}>Some Link</a>
您可以使用嵌套。
有两个函数一个是openTab()
,另一个是closeMobileMenue()
,首先我们调用openTab()
内部的另一个函数closeMobileMenue()
。
function openTab() {
window.open('https://play.google.com/store/apps/details?id=com.drishya');
closeMobileMenue() //After open new tab, Nav Menue will close.
}
onClick={openTab}