Question

我正在使用Reactstrap折叠来查看常见问题解答。但是，我一次只想打开一个。我曾尝试更改崩溃状态，但没有任何效果。我可以打开所有物品。我还尝试将其替换为不受控制的崩溃，因此不必管理状态。有什么想法吗？

这是我的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { Col, Collapse } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg- 
icons';

class ListGroupCollapse extends React.Component {
static propTypes = {
    item: PropTypes.object,
};
state = {
    collapse: false,
    active: false,
};

toggle = () =>
    this.setState({
        collapse: !this.state.collapse,
        active: !this.state.active,
    });

render() {
    const item = this.props.item;
    return (
        <Col key={item.title}>
            <div
                className={this.state.active ? 'title active' : 'title'}
                onClick={this.toggle}
            >
                {item.title}
                <FontAwesomeIcon
                    icon={
                        this.state.active ? faChevronUp : faChevronDown
                    }
                />
            </div>
            <Collapse isOpen={this.state.collapse}>
                <div className="content">
                    <span
                        dangerouslySetInnerHTML={{
                            __html: this.props.item.content,
                        }}
                    />
                </div>
            </Collapse>
        </Col>
    );
}
}

export default ListGroupCollapse;

Answer 1

尝试在标签项中添加isOpen = {true}属性，希望这可以满足您的需求。

Answer 2

要打开一个收合，您应该将要打开的收合与某种ID绑定在一起。因此它知道要打开什么折叠。

this.state = {
  collapse: null
};

toggle = (id) => {
  if (!this.state.collapse || id !== this.state.collapse) {
    this.setState({
      collapse: id
    });
  } else if (this.state.collapse === id) {
      this.setState({ collapse: false })
  }
}

<Collapse isOpen={this.state.collapse === id}>
  <div className="content">
    <span
      dangerouslySetInnerHTML={{
        __html: this.props.item.content,
      }}
    />
  </div>
</Collapse>

您只需要为ID确定一个系统，自己生成它们，或者也许已经将它们包含在元素中，由您决定。希望对您有所帮助。

Answer 3

这是答案，您应该将折叠状态设置为布尔值数组，然后使用toggleCollapse函数根据索引更改值：

const [collapse, setCollapse] = useState([]);

const toggleCollapse = (index) => {
    let collapseCopy = [...collapse];
    collapseCopy[index] = !collapseCopy[index];
    setCollapse(collapseCopy);
}

地图功能内的JSX代码：

<ListGroupItem onClick={() => toggleCollapse(index)} key={index}>
  <Collapse isOpen={collapse[index]}>
Hello world!
 </Collapse>
</ListGroupItem>

Reactstrap如何崩溃只能打开一项？

3 个答案: