如何将 V 形添加到 Reactstrap 表格中的折叠

Question

我有一个表格，每行都有折叠组件。我想向其中添加 V 形，当我单击它时，我希望显示内容并且 V 形会改变其形状。我怎样才能在表中做到这一点？

Ps：是否可以在不定义状态的情况下做到这一点？

这是一个例子

https://stackblitz.com/edit/reactstrap-uncontrol-collapse-2qgsf6?file=index.js,index.html

Answer 1

您需要使用受控的

Collapse

而不是

UncontrolledCollapse

。

此外，您的数据应该位于数组中，并映射到

render()

函数内。

最后，我还会避免使用笨重的

<table>

元素来构建内容。使用 FlexBox 或 Gird 布局。

注意： 如果

this.state.toggleStates[index]

是

true

，则表示

.AccordianItem

已展开。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Card, CardBody, Collapse } from 'reactstrap';

import './style.css';

const rows = [
  {
    title: 'Request Headers:',
    body: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Nesciunt magni, voluptas debitis similique porro a
    molestias consequuntur earum odio officiis natus, amet
    hic, iste sed dignissimos esse fuga! Minus, alias.`,
  },
  {
    title: 'Request Headers:',
    body: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Nesciunt magni, voluptas debitis similique porro a
    molestias consequuntur earum odio officiis natus, amet
    hic, iste sed dignissimos esse fuga! Minus, alias.`,
  },
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      toggleStates: Array.from(rows, () => false),
    };
  }

  toggleIndex(index) {
    const toggleStates = [...this.state.toggleStates];
    toggleStates[index] = !toggleStates[index]; // toggle the state
    this.setState({ toggleStates });
  }

  render() {
    return (
      <div className="App">
        <div className="Accordion">
          {rows.map(({ title, body }, index) => (
            <div className="AccordionItem">
              <div
                className="AccordionItemHeader"
                onClick={() => this.toggleIndex(index)}
              >
                <box-icon
                  name={
                    this.state.toggleStates[index]
                      ? 'chevron-down'
                      : 'chevron-right'
                  }
                ></box-icon>
                <b>{title}</b>
              </div>
              <div className="AccordionItemContent">
                <Collapse isOpen={this.state.toggleStates[index]}>
                  <Card>
                    <CardBody>{body}</CardBody>
                  </Card>
                </Collapse>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
}

.App {
  display: flex;
  flex-direction: column;
  width: 400px;
}

.Accordion {
  display: flex;
  flex-direction: column;
}

.AccordionItem {
  display: flex;
  flex-direction: column;
}

.AccordionItemHeader {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: #ddd;
}

.AccordionItemContent {
  flex: 1;
}

这是修改后的 StackBlitz：

https://stackblitz.com/edit/reactstrap-uncontrol-collapse-pzq9af?file=style.css