Javascript 如何在同一个 onClick 事件 ReactJS 上调用多个函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48870428/
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
How to call multiple functions on the same onClick event ReactJS
提问by Liz Parody
I have this function and when I click on the <li>tag, I want to call two functions, onClick={handleProjectSelection(project)}a handler function that comes from props from the parent component, and also this function onClick={() => this.setState({ showingProjectSelector: false })}
我有这个函数，当我点击<li>标签时，我想调用两个函数，onClick={handleProjectSelection(project)}一个来自父组件的 props 的处理函数，还有这个函数onClick={() => this.setState({ showingProjectSelector: false })}
renderDropdown () {
const { displayDropdown, projects, handleProjectSelection } = this.props
if (this.state.showingProjectSelector && displayDropdown) {
const projectsList = projects.map((project) => (
<li className='u-cursor--pointer u-font-size--12px'
key={project.get('id')}
onClick={handleProjectSelection(project)} >
<i className='fa fa-square u-font-size--10px' style={{color: project.get('color')}}></i>
{project.get('name')}
</li>
))
How can I call this two functions? This is the handler function from the parent component
我该如何调用这两个函数？这是父组件的处理函数
handleProjectSelection = (project) => () => {
this.setState({
projectToAdd: project.get('id'),
projectToAddColor: project.get('color'),
projectToAddName: project.get('name') === 'default' ? 'No' : project.get('name').substring(0, 2)
})
}
采纳答案by Mayank Shukla
Write it like this:
像这样写：
onClick={() => {
handleProjectSelection(project);
anotherfunctionCall();
}}
Or create a single function, use that as a click handler. Inside that function call other two functions, Like this:
或者创建一个函数，将其用作点击处理程序。在该函数内部调用其他两个函数，如下所示：
onClick={this.handleClick}
handleClick(){
function1();
function2();
}
See there are two ways of using arrow function:
看到有两种使用箭头函数的方法：
1- Concise Body: () => /*single expression*/
1- 简洁的身体： () => /*single expression*/
2- Block Body: () => {}
2- 块体： () => {}
In block body inside {}(body of the function), we can perform any number of task.
在块体内部{}（函数体），我们可以执行任意数量的任务。
Like this:
像这样：
onClick={() => {
fun1();
fun2();
fun3();
fun4();
....
funN();
}}
回答by Léo R.
You can Wrap your two+ function calls in another function/method. For example
您可以将两个以上的函数调用包装在另一个函数/方法中。例如
var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
回答by Amanshu Kataria
You can do it in two ways:
1.
你可以通过两种方式做到这一点：
1。
onClick={()=>{
callFunctionOne();
callFunctionTwo();
}}
2.
2.
callTwoFunctions(){
callFunctionOne();
callFunctionTwo();
}
onClick={this.callTwoFunctions}
