onClick ReactJS调用多个函数

我知道在香草JavaScript中，我们可以做到:

onclick="f1();f2()"

在ReactJS中调用onClick函数等价于什么?

我知道调用一个函数是这样的:

onClick={f1}
402217 次浏览
小开
最佳答案

将两个+函数调用打包到另一个函数/方法中。以下是这一观点的几个变体:

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();
}

这些函数可以定义为父类上的方法，然后从包装器函数调用。

你可能有main元素，它会像这样引起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}
小开

你可以简单地将它包装在[]中。这将工作以及在材质UI按钮。

<Button onClick={(event) => [function1(), function2()]}>Click Me</Button>

点击查看样例代码

点击查看输出

小开
假设你有一个按钮，你想要执行两个onClick事件，

. quot;显示隐藏的文本和隐藏按钮只需单击一次 
let a = 'invisible'
let b = 'visible'
const [show, setShow] = useState(a)
const [buttonshow, setButtonShow] = useState(b)


<button onClick={() => {setButtonShow(a); setShow(b)}}>Read More</button>
<p>This text will show after you press the button Read more and Read
more will be hidden from the DOM
</p>

如您所见，匿名函数只返回两个函数。

{setButtonShow(a); setShow(b)}
小开

最好的方法:

onClick={ () => { f1(); f2();} }

小开 

//Don't do this way
function App() {
return (
<div>
<button
onClick={() => {
console.log('hello');
console.log('world');
}}>
I'm a button
</button>
</div>
);
}


//Do this way
function App() {


function fun1() {
console.log('hello');
}


function fun2() {
console.log('world');
}


return (
<div>
<button onClick={() => {fun1();fun2();}}>Click</button>
</div>
);
}

小开

功能组件

             <button
onClick={() => {
cancelOrder();
handlerModal();
}}
>
Cancel
</button>
小开

如果你必须同时在一个按钮上应用两个函数，那么我们可以在React js中像这样简单地添加。

<button onClick={()=> {fun1(); fun2()}}>Show more</button>

提交答案