React JS 可重用折叠/切换功能答案

【问题标题】：React JS Reusable Collapse/Toggle FunctionReact JS 可重用折叠/切换功能
【发布时间】：2018-06-11 13:56:20
【问题描述】：

我正在尝试制作可重复使用的切换功能。

组件初始状态：

constructor(props) {
    super(props);

    this.state = {
        collapseFirst: false,
        collapseSecond: false
    };
}

切换功能（它应该根据点击的折叠目标改变真/假状态）：

handleToggle = e => {
    const collapseItem = e.target.getAttribute('data-control');
    this.setState({
        [collapseItem]: !this.state.collapseItem
    });
};

渲染元素（使用 Reactstrap Collapse 组件）：

return (
    <div>
        <Button color="primary" onClick={this.props.toggle} data-control="collapseFirst">
            First Collapse
        </Button>
        <Collapse isOpen={this.props.collapseFirst}>
            <p>Some text</p>
        </Collapse>
        <Button color="primary" onClick={this.props.toggle} data-control="collapseSecond">
            Second Collapse
        </Button>
        <Collapse isOpen={this.props.collapseSecond}>
            <p>Some another text</p>
        </Collapse>
    </div>
);

问题在于，出于某种原因，collapseItem 返回了预期的数据控制值，但 this.state.collapseItem 未定义。

我做错了什么？

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

你把变量名和值弄混了。不用担心，尤其是对于这些 ES6 语法中的一些，我们最优秀的人都会遇到这种情况。

collapseItem 不是this.state 的属性。 this.state 对象的唯一属性是 collapseFirst 和 collapseSecond。

在handleToggle() 中，您创建了一个名为collapseItem 的常量。本声明：

[collapseItem]: !this.state.collapseItem

使用 ES6 computed property syntax。这将获取 collapseItem 的字符串值并在对象上创建一个属性，并以该值作为键。

由于collapseItem 的值应该是'collapseFirst' 或'collapseSecond'，这意味着我们将在名为collapseFirst 或collapseSecond 的对象上创建一个属性，而不是collapseItem。

声明

!this.state.collapseItem

将始终返回true，因为正如我所说，this.state.collapseItem 不存在，因此将返回undefined。 !undefined 是 true。

我相信你的意思是：

[collapseItem]: !this.state[collapseItem]

这将从现有状态中获取相应属性的值。

另外，请注意，当新状态依赖于先前的状态时，您通常应该使用以下setState() 重载：

this.setState(state => ({
    [collapseItem]: !state[collapseItem]
})

阅读here

【讨论】：