gpt4 book ai didi

javascript - 如何在 react 中调用onClick中的多个方法?

转载 作者:行者123 更新时间:2023-12-04 01:49:35 25 4
gpt4 key购买 nike

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

关于javascript - 如何在 react 中调用onClick中的多个方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55339640/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com