我试图隐藏和显示来自反应堆的卡组件中的数据

Posted 2021-04-01

我试图在选择其他卡的帮助下显示和隐藏数据，但是当我选择一张卡时，所有卡都显示而不是一张卡，该数据是动态数据。

我试图通过id来显示一张卡中的特定数据我无法实现。

{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的组合来实现您想要的效果。

您需要将当前选定的元素ID存储在状态中，并使用“折叠”的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;