Javascript 如何使用reactjs折叠div？

我使用的是reactjs和BootstrapV3.0，但是我在那里找不到任何折叠类，所以我在我的SCS中定义了这个类。问题是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>

{
this.toggle.bind（'demo'）
}}>
打开/关闭

如何将类名从collapse更改为collapse.in和viceversa？

---

下面是一个代码示例：

您的SCS和HTML都很好，问题在于您如何使用它们

组件的打开/关闭状态应该用

this.state

中的属性表示，而

toggle（）

函数应该简单地切换该属性。最后，

render（）

函数应该负责在它呈现的

上设置正确的CSS类

这是你的名片

我所做的：

• 我在组件构造函数中定义了一个初始状态：如您所见，我最初将

  open

  属性设置为

  false

• 我重写了

  toggle（）

  方法，使用

  this.setState（）

  切换

  open

  属性的值

• 我修改了

  render（）

  函数，根据状态生成
  的类名。如果组件状态是打开的，则类名将是

  “collapse in”

  ，否则它将只是

  “collapse”

---

还有一个名为“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

import React，{Component}来自“React”
从“react bootstrap”导入{按钮，折叠}
类测试扩展了组件{
状态={
开放：假
}
render（）{
返回(
折叠分区
单击按钮时的内容

);
}
}
导出默认测试

这不应该是

e.target.className='collapse in'

太棒了，当我在触发渲染的道具中进行更改时，如何/在哪里更改状态以打开？然后我想打开面板。如果您想使用道具而不是状态打开面板，只需在

render（）

函数中使用

this.props

而不是

this.state

。请注意，在这种情况下，您不需要在构造函数中设置初始状态，也不需要使用

toggle（）

方法，因为父组件负责更改子组件的道具。我希望使用道具和状态。我需要阅读componentDidMount事件中的道具吗？但是在初始化过程中只会触发一次？在组件的任何地方，

this.Props

中都可以使用道具。我建议你读一本关于React的教程。道具和状态用法是React的基础，从您的评论来看，您似乎对它们是什么以及它们是如何工作的感到困惑。我稍微更改了您的代码笔，以向您展示我的意思：。现在它不再关闭了。