Benutzerdetails anzeigen mit ClickHandler

Question

Ich habe eine Benutzerliste, wie klicke ich auf die Details für jeden Benutzer?

Muss ich den API-Aufruf in dieser Komponente tun?

Jede Hilfe viel

geschätzt

Hier ist meine Benutzerliste:

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

Hier meine Komponente, die die Benutzer bekommt, muss ich brauche:

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

zu Benutzerdaten zu navigieren Seite, die Sie verwenden können, reagieren Router wie folgt

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

Um Informationen über Benutzer zu erhalten, müssen Sie 'redux' verwenden, damit Sie die Benutzerinformationen in den gemeinsamen Speicher laden und von jeder Komponente empfangen können.