反应旋转手风琴箭头Onclick

问题描述

How can I rotate the arrows onclick

下面是我的反应折叠的代码，单击时我想旋转折叠手风琴的箭头。

我正在使用reactstrap对其进行构建并为我的图标做出fontawsome

我还附加了一个.GIF链接，以演示我的手风琴当前如何运行。

import React,{ Component } from "react";
import { Collapse,CardBody,Card,CardHeader } from "reactstrap";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const nested = [
  {
    id: 10,title:"Customer Queries"
  },];

const Icon = <FontAwesomeIcon icon={faChevronDown} color={"#EB8C00" } />;
 
class Colapse extends Component {
  constructor(props) {
    super(props);
    this.tog = this.tog.bind(this);
    
    this.state = { 
      
      col: 0,cards: [
    {
      id:1,title:"General information requests",sub_title:"Fault reports",body:"Something to display for body 1",},{
      id:2,title:"Account queries",sub_title:"Communication protocols",body:"Something to display for body 2",}
    ] };
  }

  tog(e) {
    let event = e.target.dataset.event;
    this.setState({
      col: this.state.col === Number(event) ? 0 : Number(event),});
  }


  render() {
    const { col,cards } = this.state;
 
    return (
      <div className="container collapse-container">
  

        

          {nested.map((element,index) => {
            return (
              <Card key={index} className="card rounded ">
        
                <CardHeader
                  className="card-header"
                  onClick={this.tog}
                  data-event={(index = element.id)}
                >
                  <p className="collapse d-flex">
                    <div className=" p-2 mr-auto font-weight-bold">
            <p className="">{element.title}</p>
                    </div>
                    <a
                      class="click-layer"
                      onClick={this.tog}
                      data-event={index}
                    ></a>
                  </p>
                </CardHeader>

                <Collapse isOpen={col !== index}>
                  <CardBody className="card-body">
                    <p className="card-text">Customer Queries relate to information,account or meter related faults reported by the customer.</p>
                    {/**HERE NESTED */}
                    {cards.map((index) => {
                      
                      return (
                        <Card key={index} className="card-sub rounded ">
                          <p className="card-header-sub" >{index.title}</p>
                          <CardHeader
                            className="card-header-sub"
                            onClick={this.tog}
                            data-event={index.id}
                          >
                            <p className="colle d-flex">
                              <div className="p-2 rotate">{Icon}</div>
                              <div className=" p-2 mr-auto font-weight-bold">
                      <p className="card-header-sub">{index.sub_title}</p>
                              </div>
                              <a
                                class="click-layer"
                                onClick={this.tog}
                                data-event={index.id}
                              ></a>
                            </p>
                          </CardHeader>

                          <Collapse isOpen={col === index.id}>
                            <CardBody className="card-body-sub">
                              <p className="card-text-body">{index.body}</p>
                            </CardBody>
                          </Collapse>
                        </Card>
                      );
                    })}
                    {/**End Of Nested */}
                  </CardBody>
                </Collapse>
              </Card>
            );
          })}
       
      </div>
    );
  }
}

export default Colapse;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）