我有一个reactstrap
Collapse
我正在尝试的组件 toggle
state
来自外部Button
位于使用自定义状态变量的映射项循环内。
我的问题:
为什么只有open
而不是toggle
collapse
当我的 openCollapse
上有状态时组件方法setState
至!state.collapse
?
我的代码:
// some_items.js (brief example)
// State
this.state = {
toggleCollapse: false
}
// my custom state variable that I want to have toggle
openCollapse(itemId) {
this.setState(state => ({
[`toggleCollapse-${itemId}`]: !state.collapse
}));
}
// mapped item with button trigger for toggling the collapse
<div key={item.id>
<Button
onClick={() => {
this.openCollapse(item.id);
}}
>
View Listed Item Info
</Button>
//
// Some extra content that belongs here in between..
//
<ItemInfoCollapse
show={this.state[`toggleCollapse-${item.id}`]}
item={item}
/>
</div>
// My item_collapse.js
class ItemInfoCollapse extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
collapse: false,
isOpen: this.props.show
};
}
componentWillReceiveProps(nextProps) {
this.setState({ isOpen: nextProps.show });
}
toggle = () => {
this.setState({ collapse: !this.state.collapse });
};
render() {
return (
<Collapse isOpen={this.state.isOpen} className={this.props.className}>
// Some JSX markup
</Collapse>
)
}
最佳答案
决定 Collapse
组件打开还是关闭的因素取决于您从父组件传递给它的 show
属性。
看来您已正确设置所有内容,但在 openToggle
函数中使用的状态变量 - !state.collapse
除外。我在任何地方都没有看到 collapse
变量,这意味着它是未定义的,因此它实际上正在运行 !undefined
,它的计算结果始终为 true(您可以在浏览器控制台中测试它)。
我认为你的意思是 !state[
toggleCollapse-${itemId}]
而不是 !state.collapse
关于javascript - 从自定义状态变量切换状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55345615/