时间戳

首页 > 解决方案 > 如何将切换绑定到单击的元素以在反应中映射数据

reactjs - 如何将切换绑定到单击的元素以在反应中映射数据

问题描述

我将 reactstrap/bootstrap 用于手风琴功能。我在切换和点击时遇到问题。我的状态、函数和渲染如下所示：

state = {
    basicFeatures: [],
    fuelEconomy: {},
    upholsteryType: null,
    category: 'Engine',
    collapse: false,
    active: false,
    activeTab: 'capabilities',
};


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

const specsCatsR = this.props.specs.map((item, i) => {
        return (
            <React.Fragment>
                <Col xs="12" key={i} className="border-bottom p-15">
                    <FontAwesomeIcon
                            icon={
                                this.state.active ? faMinusCircle : faPlusCircle
                            }
                        />
                        <h5 
                            className="collapse-header" 
                            onClick={this.toggle.bind(this)}
                            >
                            {' '}
                            {item.category}{' '}
                        </h5>
                        <Collapse isOpen={this.state.active}>
                            <SpecsDetails
                                vehicle={this.props.vehicle}
                                values={item.values}
                                category={item.category}
                            />
                        </Collapse>
                    </Col>
            </React.Fragment>
        );
    });

它吐出一个项目列表。但是，当我单击一个项目时，它们都会打开/切换。我怎样才能将它绑定到只打开被点击的那个？

标签： reactjsreact-native

解决方案

如果一次只应该扩展一个元素，我建议将id当前扩展项的 存储在您的state（在此处active）中。
切换函数将通过预配置接收被id点击的元素，然后接收onClick事件参数：

state = {
    basicFeatures: [],
    fuelEconomy: {},
    upholsteryType: null,
    category: 'Engine',
    collapse: false,
    active: null, //Active is not a boolean anymore
    activeTab: 'capabilities',
};


toggle = id => ev => { //Add brackets here, you do not need to return the result of setState
    this.setState({
        collapse: !this.state.collapse,
        active: id,
    });
}

const specsCatsR = this.props.specs.map((item, i) => 
        <React.Fragment>
            <Col xs="12" key={i} className="border-bottom p-15">
                <FontAwesomeIcon
                    icon={
                        this.state.active ? faMinusCircle : faPlusCircle
                    }
                />
                <h5
                    className="collapse-header"
                    onClick={this.toggle(i)} // bind is not necessary since you are using an arrow function
                >
                    {` ${item.category} `}
                </h5>
                <Collapse isOpen={this.state.active === i}> //If the index is the same as the active element id, it expands
                    <SpecsDetails
                        vehicle={this.props.vehicle}
                        values={item.values}
                        category={item.category}
                    />
                </Collapse>
            </Col>
        </React.Fragment>
    );

推荐阅读