javascript - 折叠时向 Accordion Toggle 添加类

Question

在 React 中，我使用了“react-bootstrap”模块。当我使用 Bootstrap Accordion 显示项目列表时。当“Accordion.Collapse”折叠时，我需要在“Accordion.Toggle”中添加一个类。我尝试过对 onClick 函数使用react，但是，它在每次单击时都有效，并且当新的“Accordion.Toggle”类折叠时，以前的“Accordion.Toggle”类不会删除。

注意:如果我直接使用 Bootstrap CSS 和 JS，而不使用 Bootstrap 节点模块，这是可能的。 Bootstrap 提供了一个名为“collapsed”的类。仅供引用，https://getbootstrap.com/docs/4.3/components/collapse/

class Sidebar extends Component {
  render() {
    return(
      <Accordion>
        <Accordion.Toggle 
          as={Nav.Link} 
          eventKey={1}
          className="HasChild">First Title</Accordion.Toggle>
        <Accordion.Collapse eventKey={1}>
          <Nav as="ul">
            <Nav.Link href="#">First Sub Item</Nav.Link></Nav.Item>
          </Nav>
        </Accordion.Collapse>
        <Accordion.Toggle 
          as={Nav.Link} 
          eventKey={2}
          className="HasChild">Second Title</Accordion.Toggle>
        <Accordion.Collapse eventKey={2}>
          <Nav as="ul">
            <Nav.Link href="#">Second Sub Item</Nav.Link></Nav.Item>
          </Nav>
        </Accordion.Collapse>
        <Accordion.Toggle 
          as={Nav.Link} 
          eventKey={3}
          className="HasChild">Third Title</Accordion.Toggle>
        <Accordion.Collapse eventKey={3}>
          <Nav as="ul">
            <Nav.Link href="#">Third Sub Item</Nav.Link></Nav.Item>
          </Nav>
        </Accordion.Collapse>
      </Accordion>
    );
  }
}

Answer 1

您可能很久以前就解决了这个问题，但这里有一个解决方案，使用 React useState Hook 来跟踪哪个面板打开，以及 useAccordionToggle Hook react-bootstrap 创建自定义切换。

这是编写 React 代码的一种略有不同的形式，因为我更喜欢函数组件，但它实际上与您的代码相同。

import React, { useState } from 'react'
import { Nav, Accordion, useAccordionToggle } from 'react-bootstrap'

const AccordionClassExample = () => {

  const [panelIndex, setPanelIndex] = useState()

  const CustomToggle = ({ children, eventKey }) => {

    // Decorate the click event to also set state in the component so we can 
    // compare the open panel key with the state and toggle classes accordingly
    const customOnClick = useAccordionToggle(eventKey, () => {
      setPanelIndex( eventKey === panelIndex ? null : eventKey )
    })

    const customClass = (eventKey === panelIndex) ? "open-class" : "closed-class"

    return (
      <Nav.Link className={ customClass } onClick={ customOnClick }>
        { children }
      </Nav.Link>
    )
  }

  return (
    <Accordion>
      <CustomToggle eventKey={ 1 }>First Title</CustomToggle>
      <Accordion.Collapse eventKey={ 1 }>
        <Nav as="ul">
          <Nav.Link href="#">First Sub Item</Nav.Link>
        </Nav>
      </Accordion.Collapse>

      <CustomToggle eventKey={ 2 }>Second Title</CustomToggle>
      <Accordion.Collapse eventKey={2}>
        <Nav as="ul">
          <Nav.Link href="#">Second Sub Item</Nav.Link>
        </Nav>
      </Accordion.Collapse>

      <CustomToggle eventKey={ 3 }>Third Title</CustomToggle>
      <Accordion.Collapse eventKey={3}>
        <Nav as="ul">
          <Nav.Link href="#">Third Sub Item</Nav.Link>
        </Nav>
      </Accordion.Collapse>
    </Accordion>
  )
}

export default AccordionClassExample

这是一个非常基本的示例，但希望对您有所帮助。它是用 ES6 编写的，因此希望这对您也有意义。