如何将api响应值传递给onclick函数
如何将api响应值传递给onclick函数
提问于 2020-04-09 23:04:16
当我单击listgroup.item时，我希望将userid传递给onclick函数，以undefined.if形式获取值，在handleclick中获取值，然后将值作为属性传递给另一个组件，并获得用户的完整详细信息。任何解决方案都要提前感谢
import React, { Component } from 'react'
import axios from 'axios'
import ListGroup from 'react-bootstrap/ListGroup';
class ViewUsers extends Component {
constructor(props) {
super(props)
this.state = {
User:[],
error:[],
Id:0
}
this.handleclick = this.handleclick.bind(this)
}
handleclick = (User) => {
this.setState({
Id:User.userid
})
this.props.history.push('/Viewuserbyid')
console.log(this.Id);
}
componentDidMount(){
const header ={
'Content-Type': 'application/json',
'Accept': 'application/json',
}
axios.post('https://localhost:/api/getallusers',{
header:header
})
.then(res => {
console.log(res)
this.setState({
User:res.data
})
})
.catch(Error =>{
this.setState({
error:'Error retriving data'
})
console.log(Error)
})
}
render() {
const {User,error} = this.state;
return (
<div style={{height:"100%"}}>
{/* onChange={(event)=>this.setState({keyword:event.target.value})} */}
<input type="text" placeholder="search" className="form-control form-control-sm" />
<button>search</button>
{
User.length ? User.map(User => (
<ListGroup key={User.userid}>
<ListGroup.Item onClick={this.handleclick.bind(this,User.userid)}>
Name : {User.name} <br/> AccountNumber : {User.accountNumber}
</ListGroup.Item>
</ListGroup >) : null
}
{
error ? <div>{error}</div> : null
}
</div>
)
}
}
export default ViewUsers回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-09 23:12:45
这样行得通吗？
<ListGroup.Item onClick={() => this.handleclick(User.userid)}>也许可以在click处理程序中使用以下代码：
handleclick = (User) => {
this.setState({
Id:User.userid,
// might want to update User also by uncommenting the next line
// User,
}, () => {
console.log(this.state.Id)
console.log(this.state.User)
})
this.props.history.push('/Viewuserbyid')
}Stack Overflow用户
发布于 2020-04-09 23:22:15
尝试使用onClick = {() => {this.handleclick(user.userid)}}和handleclick = id =>{ this.setstate({id:id}) }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61124224
复制相关文章
相似问题
腾讯云开发者
