javascript - 如何在 onClick 中调用多个方法进行反应?
问题描述
我的反应应用程序中有两个组件(父组件和子组件)。我的子组件中有两个按钮单击,我需要将两个道具传递给父组件。我使用如下代码。问题是,我不能在父组件的元素中包含这两种方法,但我需要。如何在父组件中同时使用 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;}}/>
)
}
}
解决方案
你错过了你的 ()
<EnhancedTable onClick = {(e)=>{this.editUser(); this.deleteUser();}}/>
推荐阅读
- java - 具有休眠参数化的 DAO 泛型
- vba - 查找多个单词的任何出现并更改它们的颜色并加粗
- python - 列表理解因两个集合差异对象而失败
- css - 如何在CSS中的无缝背景图像上做等效的不透明度线性渐变
- node.js - xa如何从外部中断正在运行的嵌套循环
- c# - 如何修复'InvalidCastException:无法将'System.Int32'类型的对象转换为'System.String'类型
- go - 无法在 GORM 中设置 has-many 关联
- javascript - 为什么 catch() 块没有在 Objection.js 查询中运行,而 then() 总是运行传递 0 或 1 作为结果?
- python - 使用无服务器部署 python 保证包时出现错误“解压缩文件的大小大于 250 MB”
- javascript - XMLHttpRequest 不会抛出错误,但不会调用 onload