如何仅更改 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