Javascript 调用多个函数 onClick ReactJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26069238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call multiple functions onClick ReactJS
提问by user2554585
I know in vanilla js, we can do
我知道在 vanilla js 中，我们可以做到
onclick="f1();f2()"
What would be the equivalent for making two function calls onClick in ReactJS?
在 ReactJS 中进行两个函数调用 onClick 的等价物是什么？
I know calling one function is like this:
我知道调用一个函数是这样的：
onClick={f1}
回答by Rob M.
Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:
将您的两个以上函数调用包装在另一个函数/方法中。以下是该想法的几个变体：
1) Separate method
1) 分离法
var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
or with ES6 classes:
或使用 ES6 类：
class Test extends React.Component {
onClick(event) {
func1();
func2();
}
render() {
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
}
2) Inline
2) 内联
<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>
or ES6 equivalent:
或等效于 ES6：
<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>
回答by Nikolas Freitas Mr Nik
Maybe you can use arrow function (ES6+) or the simple old function declaration.
也许您可以使用箭头函数 (ES6+) 或简单的旧函数声明。
Normal function declaration type (Not ES6+):
普通函数声明类型（非 ES6+）：
<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>
Anonymous function or arrow function type (ES6+)
匿名函数或箭头函数类型 ( ES6+)
<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>
The second one is the shortest road that I know. Hope it helps you!
第二条是我所知道的最短的路。希望对你有帮助！
回答by Ashish Singh
Calling multiple functions on onClick for any element, you can create a wrapper function, something like this.
在 onClick 上为任何元素调用多个函数，您可以创建一个包装函数，就像这样。
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
These functions can be defined as a method on the parent class and then called from the wrapper function.
这些函数可以定义为父类上的方法，然后从包装函数调用。
You may have the main element which will cause the onChange like this,
你可能有主要的元素会像这样导致 onChange，
<a href='#' onClick={this.wrapperFunction}>Some Link</a>
回答by Ankit Kumar Rajpoot
You can use nested. There are tow function one is openTab() and another is closeMobileMenue(), Firstly we call openTab() and call another function inside closeMobileMenue().
您可以使用嵌套。有两个函数，一个是 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}
回答by Laura
this onclick={()=>{ f1(); f2() }}helped me a lot if i want two different functions at the same time.
But now i want to create an audiorecorder with only one button. So if i click first i want to run the StartFunction f1()and if i click again then i want to run
StopFunction f2().
onclick={()=>{ f1(); f2() }}如果我同时想要两个不同的功能，这对我有很大帮助。但现在我想创建一个只有一个按钮的录音机。所以如果我先点击我想运行 StartFunction f1()，如果我再次点击然后我想运行 StopFunction f2()。
How do you guys realize this?
你们是怎么意识到这一点的？
