ClickHandlerを使用してユーザーの詳細を表示

Question

ユーザーのリストがありますが、各ユーザーの詳細をどのようにクリックすればいいですか？

このコンポーネントでapi呼び出しを行う必要がありますか？

ずっとここ

に感謝すべてのヘルプは、私のユーザーのリストです：ユーザの詳細に移動するには

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

：

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

ここでユーザーを取得し、私のコンポーネント、私はする必要がありますかあなたはこのような反応ルータを使用することができますページ

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

次に、ユーザーに関する情報を取得するには、「redux」を使用して共通のストレージにユーザー情報を読み込んで、どのコンポーネントからでも受信できるようにする必要があります。