如何折叠reactjs的div？

问题描述：

我正在使用reactjs和bootstrap v 3.0，但是我找不到任何崩溃类，所以我在scss中定义了这个类。问题是，切换按钮不起作用或toggleevent没有被触发的DIV：如何折叠reactjs的div？

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.in反之亦然？这里是一个代码示例：Codepen

不应该这是'e.target.className =“崩溃in'' –

答

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

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

这是您的Codepen updated with my suggestions。

我做了什么：

我在组件构造函数中定义初始状态：你可以看到，我的open属性设置为false开始;
我重写了toggle()方法，使用this.setState()来切换open属性的值;
我修改了render()函数，根据状态生成类名称<div>。如果组件状态是打开的，则类名称将是"collapse in"，否则将只有"collapse"。

这是真棒，如何/我在哪里改变状态，当我在触发使道具的变化打开？然后我想打开面板。 –

如果你想用道具而不是状态来打开面板，只需在'render（）'函数中使用'this.props'而不是'this.state'。请注意，在这种情况下，您不需要在构造函数中设置初始状态，也不需要'toggle（）'方法，因为父组件负责更改子组件的道具。 –

我想用道具和状态。我是否需要阅读componentDidMount事件中的道具？但是这只会在初始化时触发一次？ –

如何折叠reactjs的div？

相关推荐