如何在onClick中调用多个方法做出反应?

Dav*_*hns 2 javascript reactjs

我的应用程序中有两个组件(父组件和子组件)。我的子组件中有两次单击按钮,我需要将两个道具传递给父组件。我使用如下代码。问题是,我不能在父组件的元素中同时包含这两种方法,但我需要这样做。如何在父组件中同时使用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>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

父组件:

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;}}/>
     )
   }
}
Run Code Online (Sandbox Code Playgroud)

小智 5

您错过了()

<EnhancedTable onClick = {(e)=>{this.editUser(); this.deleteUser();}}/>
Run Code Online (Sandbox Code Playgroud)