Как может Reactstrap свернуть открыть только один предмет? - PullRequest
Новая
       11

Как может Reactstrap свернуть открыть только один предмет?

0 голосов
/ 05 декабря 2018

Я использую коллапс реактивного ремня для аккордеона часто задаваемых вопросов.Тем не менее, я хочу только один открытый за один раз.Я пытался изменить состояние коллапса, но ничего не работает.Я могу открыть все предметы.Я также попытался заменить его неконтролируемым развалом, чтобы мне не приходилось управлять состоянием.Какие-нибудь мысли?

Вот мой код: 

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;

1 Ответ

0 голосов
/ 05 марта 2019

Попробуйте добавить свойство isOpen = {true} в элемент тега, надеюсь, это сработает так, как вы ищете.

...