React JS Reusable Collapse / Toggle功能

时间:2018-01-01 16:06:31

标签: reactjs reactstrap

我试图制作可重复使用的切换功能。

组件初始状态:

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

我做错了什么?

1 个答案:

答案 0 :(得分:1)

您的变量名称和值混淆了。别担心,特别是对于一些这些ES6语法,它发生在我们最好的人身上。

collapseItem不是this.state上的属性。 this.state对象上的唯一属性是collapseFirstcollapseSecond

handleToggle()中,您创建一个名为collapseItem的常量。这句话:

[collapseItem]: !this.state.collapseItem

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

由于collapseItem的值应为'collapseFirst''collapseSecond',这意味着我们将在名为collapseFirstcollapseSecond的对象上创建属性,不是collapseItem

声明

!this.state.collapseItem

将始终返回true,因为正如我所说,this.state.collapseItem不存在,因此会返回undefined!undefinedtrue

我相信你的意思是:

[collapseItem]: !this.state[collapseItem]

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

另外,只是旁注,当新状态依赖于先前状态时,通常应使用以下setState()重载:

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

阅读here