我试图制作可重复使用的切换功能。
组件初始状态:
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未定义。
我做错了什么?
答案 0 :(得分: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