twitter-bootstrap 如何使用 reactjs 折叠 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40629319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to collapse a div with reactjs?
提问by bier hier
I am using reactjs and bootstrap v 3.0 but I can't find any collapse class in there so I defined this in my scss. The problem is that the togglebutton does not work or the toggleevent is not triggered on the div:
我正在使用 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'
}
}
This is my button:
这是我的按钮：
<button className="btn btn-block" onClick={() => {
this.toggle.bind('demo')
}}>
Open/close
</button>
How can I change the className from collapse to collapse.in and viceversa? Here is a code sample:Codepen
如何将 className 从 collapse 更改为 collapse.in，反之亦然？这是一个代码示例：Codepen
回答by lorenzo-s
Your SCSS and your HTML is fine, the problem is in how you used React.
你的 SCSS 和 HTML 都很好，问题在于你如何使用 React。
The open/closed state of your component should be represented with a property in this.state, and the toggle()function should simply toggle that property. The render()function, finally, should be responsible of setting the right CSS class on the <div>it renders.
组件的打开/关闭状态应该用 in 中的属性表示this.state，并且该toggle()函数应该简单地切换该属性。render()最后，该函数应该负责在<div>它呈现的内容上设置正确的 CSS 类。
Here's your Codepen updated with my suggestions.
这是你的Codepen 更新了我的建议。
What I did:
我做了什么：
I defined an initial state in the component constructor: as you can see, I set the
openproperty tofalseinitially;I rewrote the
toggle()method, usingthis.setState()to toggle the value of theopenproperty;I modified the
render()function generating the class name of the<div>depending on the state. If the component state is open, the class name will be"collapse in", else it will be only"collapse".
我在组件构造函数中定义了一个初始状态：如您所见，我将
open属性设置为false初始状态；我重写了
toggle()方法，this.setState()用于切换open属性的值；我修改了根据状态
render()生成类名的函数<div>。如果组件状态为 open，则类名将为"collapse in"，否则仅为"collapse"。
回答by Saurabh Kulkarni
There is also a library called as "react-bootstrap" which allows the integration of react with bootstrap. They have a very simple example for making the collapsible div, i am sharing the code for this which i have changed according to what i wanted.
还有一个名为“react-bootstrap”的库，它允许将 react 与 bootstrap 集成。他们有一个非常简单的例子来制作可折叠的 div，我正在分享我根据我想要的改变的代码。
You can use this component anywhere inside your code. This will just return a button with collapsible 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
