如何僅更改 onClick function 的單個 div 以顯示更多信息？

Question

我正在嘗試制作一個 function，當單擊“詳細信息”按鈕時，它會顯示有關用戶的更多詳細信息。 但是，對於每個 div class，按鈕都會更改 state。 我想將此限制為僅影響包含“詳細信息”按鈕的 div。 我附上了一張帶有基本樣式的屏幕截圖。 我很感激任何其他反饋，因為我對 React 很陌生。

import React, {Component} from 'react';
import './App.css';

class User extends Component {
  constructor(props) {
    super(props);
    this.state = { isVerified: false, users: []}
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch ('https://randomuser.me/api?results=50')
    .then(response => response.json())
    .then(parsedJSON => parsedJSON.results.map(contact => (
      {
        id: `${contact.login.uuid}`,
        username: `${contact.login.username}`,
        firstname: `${contact.name.first}`,
        lastname: `${contact.name.last}`,
        pic: `${contact.picture.thumbnail}`,
        phone: `${contact.cell}`,
        city: `${contact.location.city}`,
        lat: `${contact.location.coordinates.latitude}`,
        long: `${contact.location.coordinates.longitude}`
      }
    )))
    .then(users => this.setState(
      {
        users,
        isVerified: false,
        viewDetails: false
      }
    ))
    .catch(error => console.log("parsing failed", error))
  }

//This is the  method that's changing state and showing details for every random user/profile div
  viewUserDetails = () => {
    console.log('view details toggle button here')
    this.setState({showDetails: !this.showDetails})
  }

  render() { 
    const {isVerified, users, showDetails} = this.state;
    return ( 
      <div>
        <header>
          <h1>Your Contacts</h1><br></br>
          Verify Friends for Offline Use
          </header>
          <div className="container">
            {users.map(userInfo => {
              const {id, username, firstname, lastname, pic, phone, city, lat, long} = userInfo;
              return (
                <div key={userInfo.id} title={userInfo.username} className="user-profile">
                  {!this.state.showDetails ? (
                  <div className="basic-userInfo">
                    {firstname} {lastname}
                    <img src={pic} alt={username} className="user-thumbnail-basic"></img>
                    <button className="details-button" onClick={this.viewUserDetails}>Details</button>
                  </div>
                  ) : (
                  <div className="detailed-userInfo">
                    {firstname} {lastname}
                    <img src={pic} alt={username} className="user-thumbnail-detailed"></img>
                    <ul>
                      <li>{username}</li>
                      <li>{phone}</li>
                      <li>{city}</li>
                    </ul>
                  </div>
                  )}
                </div>
              )
            })}
          </div>
      </div>
     );
  }
}

export default User;

在單擊詳細信息按鈕之前預覽

Answer 1

您現在使用 state 的方式不會達到您想要的效果。 您沒有以任何方式將showDetails state 限定為用戶。 如果您想將 scope 分配給單個用戶，您可以為按鈕提供一個 id 屬性，即用戶的 id，如下所示：

 <button id={user.id} className="details-button" onClick={this.viewUserDetails}>Details</button>

然后，您可以將點擊事件傳遞給您的viewUserDetails function，而不是將 showDetails 存儲為 boolean，您可以將其設為用戶 ID，如下所示：

 viewUserDetails = event => { console.log('view details toggle button here') this.setState({showDetails: event.target.id}) }

然后，您可以檢查它是否等於用戶的 ID，而不是檢查 showDetails 是否為真：

 ... {this.state.showDetails?== id ? (

當然，這只會讓您一次查看一位用戶的詳細信息。 如果您希望能夠查看任意數量用戶的詳細信息，則可以將 showDetails 存儲為 id 數組，並檢查 it.includes() 是否為用戶的 id。

Answer 2

創建一個子組件用戶，該用戶具有自己的 showDetails state和 map用戶到該子組件。

這是一個沙盒，你可以玩它，請閱讀代碼上的解釋，祝你好運！ - https://codesandbox.io/s/condescending-cache-wdeyv