我知道在香草JavaScript中,我们可以做到:
onclick="f1();f2()"
在ReactJS中做两个函数调用onClick会等价什么?
我知道调用一个函数是这样的:
onClick={f1}
我知道在香草JavaScript中,我们可以做到:
onclick="f1();f2()"
在ReactJS中做两个函数调用onClick会等价什么?
我知道调用一个函数是这样的:
onClick={f1}
当前回答
假设你有一个按钮,你想要执行两个onClick事件, 要显示隐藏的文本和隐藏按钮,只需单击一次。
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)}
其他回答
你可以使用嵌套。
有两个函数,一个是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}
在onClick上为任何元素调用多个函数,您可以创建一个包装器函数,类似这样。
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
这些函数可以定义为父类上的方法,然后从包装器函数调用。
你可能有main元素,它会像这样引起onChange,
<a href='#' onClick={this.wrapperFunction}>Some Link</a>
//不要这样做 函数App() { 回报( < div > <按钮 onClick={() => { console.log('你好'); console.log(的世界); }} > 我是一个按钮 < /按钮> < / div > ); } //这样做 函数App() { 函数fun1() { console.log('你好'); } 函数fun2() { console.log(的世界); } 回报( < div > <按钮onClick = {() = > {fun1 (); fun2();}} >点击< / >按钮 < / div > ); }
您可以简单地将其包装在[]中。这将工作以及在材质UI按钮。
<Button onClick={(event) => [function1(), function2()]}>Click Me</Button>
单击以查看示例代码
单击以查看输出
也许您可以使用箭头函数(ES6+)或简单的旧函数声明。
正常函数声明类型(非ES6+):
<link href="#" onClick={function(event){ func1(event); func2();}}>Trigger here</link>
匿名函数或箭头函数类型(ES6+)
<link href="#" onClick={(event) => { func1(event); func2();}}>Trigger here</link>
第二条路是我所知道的最短的路。希望对你有所帮助!