ReactJs Accordion Automati c Механизм закрытия - PullRequest
Новая
       9

ReactJs Accordion Automati c Механизм закрытия

0 голосов
/ 16 января 2020

В настоящее время я работаю над компонентом аккордеона в версии реакции 16.3.2, который получает реквизит от другого компонента и отображает аккордеон соответственно. К сожалению, я не могу использовать крючки.

Это работает довольно гладко, сейчас я хочу реализовать способ, позволяющий одновременно открывать только один аккордеон на одной странице. Итак, как только вы откроете один аккордеон (в то время как другой уже открыт), он должен автоматически закрыть уже открытый.

У меня есть Id (строка, которая описывает текущий раздел, например, 'contact', 'info', et c.), И состояние аккордеона сохраняется в состоянии (устанавливается в true, когда вы переключить гармошку). Я не совсем уверен, как я мог бы реализовать этот механизм, и ищу советы о том, как я мог бы решить это умным способом. Любые указатели?

пример: https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-6dys1 (я не добавил все стили, анимации, так как это больше о функциональности)

Ответы [ 2 ]

1 голос
/ 16 января 2020

Вы можете найти решение для вашей проблемы в следующих кодах и окнах https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-yejc0

Измените имена реквизитов так, как они соответствуют вашей кодовой базе, но логика c равна solid

0 голосов
/ 16 января 2020

Вы можете сделать что-то вроде этого, используя хук состояния в компоненте приложения 

export default function App() {
  const items = [
    { id: 1, title: 'First Accordion', content: 'Hello' },
    { id: 2, title: 'Click me', content: 'Hello 2' },
    { id: 3, title: 'Third Accordion Accordion', content: 'Hello 3' },
  ]

  const [selectedItem, setSelectedItem] = useState(1)

  const handleClick = id => {
    setSelectedItem(id)
  }
  return (
    <div className="App">
      {items.map(x => {
        return (
          <Accordion 
            key={x.id} 
            id={x.id}
            title={x.title} 
            open={x.id === selectedItem}
           onClick={handleClick}
          >
            <p>{x.title}</p>
          </Accordion>
        )
      })}
    </div>
  );
}

Тогда ваш аккордеонный компонент немного проще 

class Accordion extends React.Component {
  accToggle() {
    this.props.onClick(this.props.id);
  }

  sectionClasses() {
    let classes = "accordion";
    classes += this.props.open ? " sec-on" : "";
    classes += "sec-underway";

    return classes.trim();
  }

  render() {
    return (
      <section className={this.sectionClasses()} id={this.props.id}>
        <div className="acc-title" onClick={this.accToggle.bind(this)}>
          <h3 className="acc-text">{this.props.title}</h3>
          <div className="acc-nav">
            <span className="acc-toggle" />
          </div>
        </div>

        <div className="acc-content">{this.props.children}</div>
      </section>
    );
  }
}

Accordion.defaultProps = {
  open: false
};

Accordion.propTypes = {
  id: PropTypes.number.isRequired,
  children: PropTypes.any,
  onFocus: PropTypes.func,
  progress: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.bool
  ]),
  title: PropTypes.string,
  open: PropTypes.bool
};

export default Accordion;

Гармошка вызывает функцию на компонент приложения, который обновляет состояние и отображает логи c, передается в подпорках

...