Javascript 如何在onClick-in-react中调用多个方法？

我的react应用程序中有两个组件（父组件和子组件）。我在我的子组件中点击了两次按钮，我需要向父组件传递两个道具。我使用的代码如下。 问题是，我不能在父组件的元素中同时包含这两个方法，但我需要这样做。如何在父组件中同时使用edituser和deleteuser函数

子组件：

class EnhancedTable extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      userID: 10
    };
    this.editByUserId = this.sendUserId.bind(this);
    this.DeleteByUserId = this.sendUserId.bind(this);
  }

  editByUserId() {
    this.props.onClick(this.state.userID);
  }

  DeleteByUserId() {
    this.props.onClick(this.state.userID);
  }

  render() {
    return (
       <button onClick={this.sendUserId}>
           <BorderColorIcon onClick={this.editUserById} className="action margin-r" />
           <DeleteIcon onClick={this.deleteUserById} className="action margin-r" />
       </button>
    )
  }
}

Import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: null
    };
    this.editUser = this.editUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);
   }

  editUser(idd) {
    this.setState({
      userID : idd
    })
    console.log("User Edited");
  }

   deleteUser(idd) {
      this.setState({
        userID : idd
      })
      console.log("User Deleted");
    }

  render() {
     return(
         <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>
     )
   }
}

类增强表扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户ID:10
};
this.editByUserId=this.sendUserId.bind（this）；
this.DeleteByUserId=this.sendUserId.bind（this）；
}
editByUserId（）{
this.props.onClick（this.state.userID）；
}
DeleteByUserId（）{
this.props.onClick（this.state.userID）；
}
render（）{
返回(
)
}
}

父组件：

class EnhancedTable extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      userID: 10
    };
    this.editByUserId = this.sendUserId.bind(this);
    this.DeleteByUserId = this.sendUserId.bind(this);
  }

  editByUserId() {
    this.props.onClick(this.state.userID);
  }

  DeleteByUserId() {
    this.props.onClick(this.state.userID);
  }

  render() {
    return (
       <button onClick={this.sendUserId}>
           <BorderColorIcon onClick={this.editUserById} className="action margin-r" />
           <DeleteIcon onClick={this.deleteUserById} className="action margin-r" />
       </button>
    )
  }
}

Import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: null
    };
    this.editUser = this.editUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);
   }

  editUser(idd) {
    this.setState({
      userID : idd
    })
    console.log("User Edited");
  }

   deleteUser(idd) {
      this.setState({
        userID : idd
      })
      console.log("User Deleted");
    }

  render() {
     return(
         <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>
     )
   }
}

Import EnhancedTable from./EnhancedTable'；
类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
userID:null
};
this.editUser=this.editUser.bind（this）；
this.deleteUser=this.deleteUser.bind（this）；
}
编辑用户（idd）{
这是我的国家({
用户ID:idd
})
console.log（“用户编辑”）；
}
删除用户（idd）{
这是我的国家({
用户ID:idd
})
console.log（“用户已删除”）；
}
render（）{
返回(
{this.editUser；this.deleteUser；}}/>
)
}
}

您错过了您的（）

{this.editUser（）；this.deleteUser（）；}}/>

您在这方面做得很好

 <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>

---

您可以创建另一个函数，移动其中要调用的所有函数，并在JSX

onClick

属性中引用它。我这样做了，然后控制台说idd没有定义，这是因为您声明了

editUser=this.onFillForm.bind（this）在您的构造函数中。因为this.editUser=this.onFillForm.bind（this）；onFillForm不在那里。所以这个.editUser是未定义的，我更新了我的代码。但它仍然说，editUser不是function@safwanmoha编辑代码后，两个功能都会向每个按钮触发clickOh！这与您要求的完全不同，您必须以这种方式将其传递到组件。但你的问题是问一个不同的问题当我这样做时，输出是作为一个无限循环重复的，在这样做之后，两个控制台都只为deleteUser（）触发日志