Question

我正在尝试设置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);
  };

但没有奏效。我哪里出错了？

Answer 1

您忘记在构造函数中绑定处理程序。

constructor() {
  ...
  this.handleClick = this.handleClick.bind(this)
}

handleClick(post) {
  console.log(post)
}

Answer 2

您可以将参数传递给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> ); }

Answer 3

您可以像这样声明handleClick()：handleClick = () => {...}，而不是将您的功能绑定到您的组件，这显然也可以。此语法使用arrow函数。有一个关于arrow函数的阻止帖子：https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

Answer 4

在LI元素上尝试：

onClick={this.handleClick.bind(this, post)}

然后在你的＆＃34; handleClick＆＃34;方法

handleClick(post) {
    console.log('clicked post', post);
}

onClick事件处理程序

4 个答案: