React JS Reusable Collapse / Toggle功能

Question

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

组件初始状态：

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未定义。

我究竟做错了什么？

Answer 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