Question

我试图借助选择另一张卡来显示和隐藏数据，但是当我选择一张卡时，所有卡而不是一张卡都在显示，该数据是动态数据。

我正在尝试传递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>
))}

Answer 1

根据您提供的信息，我们无法破译太多，但是您必须结合使用Collapse和Card来实现所需的功能。

您需要以状态存储当前选定的元素ID，并使用Collapse的isOpen属性切换展开。

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;

我正在尝试从reactstrap隐藏和显示卡组件中的数据

1 个答案: