我有这个功能,当我点击<li>
标签时,我想调用两个函数,onClick={handleProjectSelection(project)}
一个来自父组件的props的处理函数,以及这个函数{{ 1}}
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>
))
答案 0 :(得分:6)
像这样写:
onClick={() => {
handleProjectSelection(project);
anotherfunctionCall();
}}
或创建单个函数,将其用作单击处理程序。在该函数内部调用其他两个函数,如下所示:
onClick={this.handleClick}
handleClick(){
function1();
function2();
}
请参阅使用箭头功能的两种方法:
1-简明身体:() => /*single expression*/
2- Block Body:() => {}
在{}
(函数体)中的块体中,我们可以执行任意数量的任务。
像这样:
onClick={() => {
fun1();
fun2();
fun3();
fun4();
....
funN();
}}
答案 1 :(得分:1)
您可以用另一个函数/方法包装两个+函数调用。例如
var Test = React.createClass({
onClick: function(event){
func1();
func2();
},
render: function(){
return (
<a href="#" onClick={this.onClick}>Test Link</a>
);
}
});
答案 2 :(得分:1)
你可以用两种方式做到:
1.
onClick={()=>{
callFunctionOne();
callFunctionTwo();
}}
2
callTwoFunctions(){
callFunctionOne();
callFunctionTwo();
}
onClick={this.callTwoFunctions}