Question

我有一个用户列表，如何点击每个用户的详细信息？

我是否需要在此组件中执行api调用？

任何帮助非常感谢

这是我的用户列表：

import React, { Component } from 'react';
import { Table } from 'react-bootstrap';

export default class Users extends Component {

showDetails(){

// navigate to details page

}

render() {
    return (
        <Table responsive>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>Username</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
         {this.props.users.map((user, index) => (
            <tr onClick={showDetails}>
                <td>{user.id}</td>
                <td>{user.name}</td>
                <td>{user.username}</td>
                <td>{user.email}</td>
            </tr>
        ))}
        </tbody>
      </Table>
    );
}
}

这里是获取用户的组件，我需要：

class App extends Component {

 constructor(props) {
    super(props);
    this.state = {users: []};
  }

getUsers(){ 
 axios.get('http://jsonplaceholder.typicode.com/users')
 .then((response) => {
     this.setState({ users: response.data });
 })
 .catch((error) => {
     console.log(error);
 });
}

componentDidMount(){
  this.getUsers();
}

  render() {
      return (<div>

    <Users users={this.state.users} />

  </div>);
  }
}

export default App;

Answer 1

要导航到用户详细信息页面，您可以像这样使用react路由器

import { browserHistory } from "react-router";
...
<tr onClick={() => browserHistory.push(`/user-info/${user.id}`)}>
...

然后获取有关用户的信息，您需要使用'redux'，以便将用户信息加载到公共存储，并且因为能够从任何组件接收它。

使用ClickHandler显示用户详细信息

1 个答案: