Блог

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

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

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

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

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

 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;