React JS 可重用 Collapse/Toggle 函数

Question

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

组件初始状态：

constructor(props) {
    super(props);

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

切换功能（它应该根据点击的折叠目标改变 true/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 returns 预期的数据控制值但 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

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

我相信你是故意的：

[collapseItem]: !this.state[collapseItem]

这将从现有状态中获取适当属性的值。

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

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

仔细阅读 here

React JS 可重用 Collapse/Toggle 函数

React JS Reusable Collapse/Toggle Function

reactjs

reactstrap