我正在尝试设置onClick事件处理程序。我有一个json 100对象列表,它是使用axios从API检索的。整个数据使用.map()存储在变量中,当呈现此列表时,我们从API获取所有对象的标题。现在,当我点击任何标题时,我想要该对象的详细信息(有关详细信息,请参阅API)。这是我的demo.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, withRouter } from 'react-router';
import axios from 'axios';
export default class FetchDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(res => {
var data = res.data;
const posts = data.map(obj => obj);
this.setState({ posts });
console.log(posts);
});
}
handleClick(){
console.log("Id:/*ID of clicked title*/ title: /*title of clicked title*/ userId: /*userId of clicked title*/ body: /*body of clicked title*/");
};
render() {
return (
<div>
<ul>
{this.state.posts.map(post =>
<li key={post.id} onClick={this.handleClick}><Link to="demo">{post.id} {post.title}</Link></li>
)}
</ul>
</div>
);
}
}
我用过
<Link to="demo"></Link>
指向相同的demo.js,但我只是为了显示一个不会离开页面的可点击链接。 componentdidmount部分为我提供了该API上的所有对象。但是我无法在控制台上获得{id} {title} {userId} {body}。我也试过
handleClick(){
console.log("Id: " + this.post.id+ "title: " +this.post.title+ "userId: "+this.post.userId+ "body: "+this.post.body);
};
但没有奏效。我哪里出错了?
答案 0 :(得分:0)
您忘记在构造函数中绑定处理程序。
constructor() {
...
this.handleClick = this.handleClick.bind(this)
}
handleClick(post) {
console.log(post)
}
答案 1 :(得分:0)
您可以将参数传递给handleClick
函数。并且还路由到该项目的特定路线。
示例:强>
handleClick(post){
const { id, title, userId, body } = post;
console.log('Id: ', id, 'Title: ', title, 'userId: ', userId, 'Body: ', body);
};
render() {
return (
<div>
<ul>
{this.state.posts.map(post =>
<li key={post.id} onClick={this.handleClick.bind(this, post)}>
<Link to=`demo/{$post.id}`>{post.id} {post.title}</Link>
</li>
)}
</ul>
</div>
);
}
答案 2 :(得分:0)
您可以像这样声明handleClick()
:handleClick = () => {...}
,而不是将您的功能绑定到您的组件,这显然也可以。此语法使用arrow
函数。有一个关于arrow
函数的阻止帖子:https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
答案 3 :(得分:0)
在LI元素上尝试:
onClick={this.handleClick.bind(this, post)}
然后在你的&#34; handleClick&#34;方法
handleClick(post) {
console.log('clicked post', post);
}