[英]How to pass parameter to other component to show details of list from API on button click in react.js
I am new to reactJS. 我是ReactJS的新手。 I have made a Listview which shows the list of posts. 我做了一个Listview,显示了帖子列表。 I have a button which will take me to the other component/page on which I want to show the comments on that post. 我有一个按钮,它将带我到要显示该帖子评论的其他组件/页面。 How I will pass postId to the other component? 我如何将postId传递给其他组件? And How I will pass that id to the API service to show the comment details. 以及我如何将该ID传递给API服务以显示评论详细信息。
Here is the code. 这是代码。 This is the postComponent, Now I want to pass post.id to the commentComponent and I want to load that page on ShowComments button click. 这是postComponent,现在我想将post.id传递给commentComponent,然后在ShowComments按钮单击时加载该页面。
I am using axios to get the data. 我正在使用axios来获取数据。
state = {
posts: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(res => {
const posts = res.data;
this.setState({ posts });
})
}
render() {
return (
<div className="userlist">
<ul>
{ this.state.posts.map((post , index) =>
<li key={post.id}>
<div className="user_name"><span>Post:</span> {post.title}</div>
<div className="user_usernamename"><span>Details:</span>{post.body}</div>
<div className="actionButtons">
<button>Show Comments</button>
<button>Flag</button>
</div>
</li>
)}
</ul>
</div>
)
}
Thanks. 谢谢。
Use react router dom https://www.npmjs.com/package/react-router-dom and make a function that will be triggered on button click that will take you to other page where you will put axios call in componentWillMount (or componentDidMount) that will get you your data. 使用react router dom https://www.npmjs.com/package/react-router-dom并创建将在按钮单击时触发的功能,该功能将带您到其他页面,在该页面中您可以将axios调用放入componentWillMount(或componentDidMount ),它将为您获取数据。
Id of your post will be passed to react router dom as an argument to the triggering function 您的帖子ID将作为对触发函数的参数传递给路由器dom
You can achieve this by adding an onclick event and attaching a handler to it. 您可以通过添加onclick事件并为其添加处理程序来实现。 Then you can bind that handler to this
and the post.id
然后,您可以将该处理程序绑定this
和post.id
Read more here: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers 在此处阅读更多信息: https : //reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers
Whenever the post will be clicked this handler will be called and you can handle the axios's call internally here or if your CommentComponent
lives in the parent file then you can bubble up the click via the props and let the parent component make the API call and finally display the comments. 每当职位将被点击该处理器将被调用,您可以在内部在这里处理Axios公司的电话,或者如果您CommentComponent
住在父文件中,然后就可以泡了通过道具的点击,让父组件进行API调用,最后显示评论。
Something like so: 像这样:
state = {
posts: [],
comments: [],
showComments: false
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(res => {
const posts = res.data;
this.setState({ posts });
})
}
handleCommentClick (postId) {
// Either set the state and then do a conditional rendering
// or handle this change in the parent component
// if handled in parent component
this.props.handleCommentClick && this.props.handleCommentClick(postId);
// If handling it here then..
// First make the API call using axios
axios.get(`https://jsonplaceholder.typicode.com/comments/${postId}`)
.then(res => {
this.setState({
comments: res.comments,
showComments: true
});
});
}
render() {
return (
<div className="userlist">
<ul>
{ this.state.posts.map((post , index) =>
<li key={post.id}>
<div className="user_name"><span>Post:</span> {post.title}</div>
<div className="user_usernamename"><span>Details:</span>{post.body}</div>
<div className="actionButtons">
<button onClick={this.handleCommentClick.bind(this, post.id)}>Show Comments</button>
<button>Flag</button>
</div>
</li>
)}
</ul>
{
// Whenever show comments is made true, this component will render
showComments &&
<CommentsComponent comments={this.state.comments} />
}
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.