我知道在香草JavaScript中，我们可以做到:
onclick="f1();f2()"
在ReactJS中做两个函数调用onClick会等价什么?
我知道调用一个函数是这样的:
onClick={f1}
当前回答
在onClick上为任何元素调用多个函数，您可以创建一个包装器函数，类似这样。
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
这些函数可以定义为父类上的方法，然后从包装器函数调用。
你可能有main元素，它会像这样引起onChange，
<a href='#' onClick={this.wrapperFunction}>Some Link</a>
其他回答
如果你必须同时在一个按钮上应用两个函数，那么我们可以在React js中像这样简单地添加。
<button onClick={()=> {fun1(); fun2()}}>Show more</button>
在onClick上为任何元素调用多个函数，您可以创建一个包装器函数，类似这样。
wrapperFunction = () => {
//do something
function 1();
//do something
function 2();
//do something
function 3();
}
这些函数可以定义为父类上的方法，然后从包装器函数调用。
你可能有main元素，它会像这样引起onChange，
<a href='#' onClick={this.wrapperFunction}>Some Link</a>
最好的方法:
onClick={() => {f1();f2 ();}}
假设你有一个按钮，你想要执行两个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)}
将两个+函数调用打包到另一个函数/方法中。以下是这一观点的几个变体:
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>
