如何在同一个onClick事件ReactJS上调用多个函数 [英] How to call multiple functions on the same onClick event ReactJS

问题描述

我有这个功能，当我点击< li> 标记时，我想调用两个函数， onClick = {handleProjectSelection（项目）} 一个来自父组件的道具的处理函数，还有这个函数 onClick = {（）=> this.setState（{showingProjectSelector：false}）}

  renderDropdown（）{
 const（displayDropdown，projects，handleProjectSelection）= this.props $ b $ 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> 
））
  

我怎样才能调用这两个函数？
这是来自父组件的处理函数

pre code> handleProjectSelection =（project）=> （）=> {
this.setState（{
projectToAdd：project.get（'id'），
projectToAddColor：project.get（'color'），
projectToAddName：project.get 'name'）==='default'？'否'：project.get（'name'）。substring（0，2）
}）
}


<$ p

$ p> onClick = {（）=> {
handleProjectSelection（project）;
anotherfunctionCall（）;
}}


或者创建一个函数，将其用作点击处理程序。在这个函数内部调用其他两个函数，像这样：

pre $ $ $ $ c $ onClick = {this.handleClick}

handleClick（）{
function1（）;
function2（）;

---

查看有两种方法使用箭头函数：

1-简明正文：（）=> / *单个表达式* /

<2>块体：（）=> {}

在 {} （函数体）内的块体中，我们可以执行任意数量的任务。

像这样：

  onClick = {（）=> {
 fun1（）; 
 fun2（）; 
 fun3（）; 
 fun4（）; 
 .... 
 funN（）; 
}} 
  

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

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

解决方案

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*/

2- Block Body: () => {}

In block body inside {} (body of the function), we can perform any number of task.

Like this:

onClick={() => {
   fun1();
   fun2();
   fun3();
   fun4();
   ....
   funN();
}}

这篇关于如何在同一个onClick事件ReactJS上调用多个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！