切换数组中的特定div标记

Question

我正在建立一个简单的ReactJS应用程序，以获取GitHub用户和显示有回购。我在一个数组中显示用户，每个用户都有一个详细信息按钮，onClick只显示必须显示的特定用户div标记。我可以通过点击用户名，但onClick所有用户的div标签都在切换。我想在点击details按钮时显示repos。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import _ from 'lodash';

class SearchResults extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
    this.toggleDetails = this.toggleDetails.bind(this);
  }

  toggleDetails(userName) {
    console.log(userName);

    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    const { userList, userCount } = this.props;
    const {isOpen} = this.state;
    console.log('in searchResult = ' + this.props.userCount)

    if (userList) {
      var list = _.map(userList, (row, key) => {
        return (
          <div className="d-flex justify-content-center" key={row.id}
            style={{ border: '0px solid red' }}>
            <div className="card shadow-sm rounded" >
              <div className="card-body ">
                <div className="row ">
                  <div className="col-sm-2">
                    <img src={row.avatar_url} style={{ width: '80px', height: '80px' }}
                      className="rounded-circle" />
                  </div>
                  <div className="col-sm-10" style={{ border: '0px solid black' }}>
                    <h5 className="card-title">  {row.login}</h5>
                    <p className="display-6 text-muted"> {row.html_url} </p>
                    <button className="btn btn-outline-primary btn-sm float-right"
                      onClick={() => this.toggleDetails(row.login)}  >
                      Details
                    </button>
                  </div>
                </div>
              </div>
              {
                isOpen && 
                <table class="table table-striped" >
                  <tbody>
                    <tr>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
              }
            </div>
          </div>

        )
      })
    } else {
      var list = (
        <div className="d-flex justify-content-center ">
          <div className="card shadow-sm rounded" >
            <div className="card-body ">
              <div className="row ">
                No results to show
                </div>
            </div>
          </div>
        </div>
      )
    }

    return (
      <div className="user-list">
        {userList ?
          <div className="d-flex justify-content-center">
            <div className="count">
              <h6 className="display-6">Total Results :  {userCount} </h6>
            </div>
          </div> :
          <div className="d-flex justify-content-center">
            <div className="count">
              <h6 className="display-6">Total Results :  {userCount} </h6>
            </div>
          </div>
        }
        {list}
      </div>
    )
  }
}

export default SearchResults;

Answer 1

isOpen状态由所有用户共享。因此，您可以尝试添加另一个状态，以保持当前打开的特定用户名。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import _ from 'lodash';

class SearchResults extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false, currentUser : '' };
    this.toggleDetails = this.toggleDetails.bind(this);
  }

  toggleDetails(userName) {
    console.log(userName);
    const currentUser = this.state.currentUser == userName ? '' : userName;
    this.setState({ isOpen: !this.state.isOpen, currentUser:userName  });
  }

  render() {
    const { userList, userCount } = this.props;
    const {isOpen, currentUser} = this.state;
    console.log('in searchResult = ' + this.props.userCount)

    if (userList) {
      var list = _.map(userList, (row, key) => {
        return (
          <div className="d-flex justify-content-center" key={row.id}
            style={{ border: '0px solid red' }}>
            <div className="card shadow-sm rounded" >
              <div className="card-body ">
                <div className="row ">
                  <div className="col-sm-2">
                    <img src={row.avatar_url} style={{ width: '80px', height: '80px' }}
                      className="rounded-circle" />
                  </div>
                  <div className="col-sm-10" style={{ border: '0px solid black' }}>
                    <h5 className="card-title">  {row.login}</h5>
                    <p className="display-6 text-muted"> {row.html_url} </p>
                    <button className="btn btn-outline-primary btn-sm float-right"
                      onClick={() => this.toggleDetails(row.login)}  >
                      Details
                    </button>
                  </div>
                </div>
              </div>
              {
                isOpen && currentUser === row.login &&
                <table class="table table-striped" >
                  <tbody>
                    <tr>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
              }
            </div>
          </div>

        )
      })
    } else {
      var list = (
        <div className="d-flex justify-content-center ">
          <div className="card shadow-sm rounded" >
            <div className="card-body ">
              <div className="row ">
                No results to show
                </div>
            </div>
          </div>
        </div>
      )
    }

    return (
      <div className="user-list">
        {userList ?
          <div className="d-flex justify-content-center">
            <div className="count">
              <h6 className="display-6">Total Results :  {userCount} </h6>
            </div>
          </div> :
          <div className="d-flex justify-content-center">
            <div className="count">
              <h6 className="display-6">Total Results :  {userCount} </h6>
            </div>
          </div>
        }
        {list}
      </div>
    )
  }
}

export default SearchResults;