javascript - 从自定义状态变量切换状态

标签 javascript reactjs

我有一个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/

相关文章:

javascript - document.write 注入(inject) javascript 的时间

javascript,在 highcharts map 上缩放后更改默认位置

Javascript/React(使用 Gulp/Babel)-无法导入

reactjs - 在组件生命周期中,React 的 useEffect 何时被触发?

reactjs - React 自定义钩子(Hook)与普通函数,有什么区别

reactjs - 使用 axios 取消卸载时的异步请求

javascript - 非常奇怪的 jQuery 错误

javascript - 条件 IF 语句 - if 现代浏览器

javascript - 使用jquery点击图像按钮时控制音频播放器

javascript - ReactJS 生命周期方法不按顺序工作