Я пытаюсь скрыть и показать данные в компоненте карты из reactstrap

Я пытаюсь показать и скрыть данные с помощью выбора другой карты, но когда я выбираю одну карту, отображаются все карты, а не одна карта, эти данные являются динамическими данными.

Я пытаюсь передать идентификатор, чтобы показать определенные данные на одной карте, я не могу этого добиться.

{this.state.Installers.map((installer, index) => (
    <Card onClick={this.toggle.bind(this,installer)} >
        {installer.firstname_en} 
        <div>
            <div style={ hidden } class="col-md-12">
                <Card>
                    <div class="col-md-7">
                        <label htmlFor="firstName" className="fname" style={{ fontFamily: "Roboto" }}>First Name : {data.firstname}</label>
                    </div>
                    <div class="col-md-7">
                        <label htmlFor="lastName" className="lname" style={{ fontFamily: "Roboto"}}>Last Name :{data.lastname}</label>
                    </div>
                </Card>
))}

reactjs reactstrap
person Krishna    schedule 19.04.2019    source источник
comment
Где вызывается метод onClick?   -  person Jibin Joseph    schedule 19.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

Судя по предоставленной вами информации, мы не смогли многое расшифровать, но вы должны использовать комбинацию Collapse и Card, чтобы добиться того, чего вы хотите.

Вам нужно сохранить текущий выбранный идентификатор элемента в состоянии и использовать свойство isOpen для Collapse, чтобы переключить раскрытие.

import React from "react";
import { Collapse, Card } from "reactstrap";

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openCardID: null
    };
  }

  toggle = (installer) => {
    this.setState({
      openCardID: installer.id
    });
  }

  render() {
    return (
      <React.Fragment>
        {this.state.Installers.map(installer => (
          <div role="presentation" onClick={() => this.toggle(installer)}>
            <Collapse isOpen={this.state.openCardID === installer.id}>
              <Card>
                <div className="col-md-12">
                  {installer.firstname_en}
                  <div className="col-md-7">
                    <label htmlFor="firstName" className="fname" style={{ fontFamily: "Roboto" }}>First Name : {data.firstname}</label>
                  </div>
                  <div className="col-md-7">
                    <label htmlFor="lastName" className="lname" style={{ fontFamily: "Roboto" }}>Last Name :{data.lastname}</label>
                  </div>
                </div>
              </Card>
            </Collapse>
          </div>
        ))}
      </React.Fragment>
    );
  }
}

export default YourComponent;
person Avanthika    schedule 19.04.2019