javascript - 如何用 reactjs 折叠 div？

Question

我正在使用 reactjs 和 bootstrap v 3.0，但我在那里找不到任何折叠类，所以我在我的 scss 中定义了它。问题是togglebutton不起作用或者在div上没有触发toggleevent:

 toggle(e) {
        console.log('testing e',e)
        if (e.target.class === 'collapse') {
            e.target.className = 'collapse.in'
        } else {
            e.target.className = 'collapse'
        }
    }

这是我的按钮:

<button className="btn btn-block" onClick={() => {
               this.toggle.bind('demo')
               }}>
     Open/close
</button>

如何将 className 从 collapse 更改为 collapse.in，反之亦然？
这是一个代码示例:Codepen

Answer 1

您的 SCSS 和 HTML 都很好，问题在于您如何使用 React。

组件的打开/关闭状态应该用 this.state 中的属性表示，以及 toggle()函数应该简单地切换该属性。 render()最后，函数应该负责在 <div> 上设置正确的 CSS 类。它呈现。

这是您的Codepen updated with my suggestions .

我做了什么:

我在组件构造函数中定义了一个初始状态:如您所见，我设置了 open属性(property)给 false最初;

我重写了toggle()方法，使用 this.setState()切换 open 的值属性(property);

我修改了render()生成 <div> 的类名的函数取决于国家。如果组件状态为打开，则类名将是 "collapse in" , 否则只有 "collapse" .