onClick事件处理程序

时间:2017-09-06 07:46:39

标签: json reactjs

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

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

4 个答案:

答案 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);
}