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属性设置为false;
我重写了toggle()方法，使用this.setState()来切换open属性的值;
我修改了render()函数，根据状态生成<div>的类名。如果组件状态是打开的，则类名称将为"collapse in"，否则它将仅为"collapse"。

Answer 2

还有一个名为“ react-bootstrap”的库，该库允许将react和bootstrap集成在一起。他们有一个非常简单的制作可折叠div的示例，我正在分享此代码，并根据我的需要进行了更改。

您可以在代码内的任何位置使用此组件。这只会返回可折叠div的按钮。

import React, {Component} from 'react'
import {Button, Collapse} from 'react-bootstrap'

class Test extends Component{
    state={ 
        open:false
       }

    render(){
      return(
        <div className= "container">
           <Button className="btn" onClick={!this.state.open}>
               Collapse Div
           </Button>

           <Collapse in={this.state.open}>
               <div>
                  <p>Content when the button is clicked</p>
               </div>
           </Collapse>
        </div>
        );
       }
}

export default Test

如何使用reactjs折叠div？

2 个答案: