Typescript: инициализировать прослушиватель событий в классе - PullRequest
Новая
       9

Typescript: инициализировать прослушиватель событий в классе

0 голосов
/ 02 ноября 2018

Я создаю веб-приложение, используя Typescript реакции. Я пытаюсь сделать аккордеонное меню, которое расширяется при нажатии, но реагирует только на второй щелчок. Я думаю, это потому, что он начинает слушать только после первого клика.

Есть ли способ заставить его слушать с самого начала? Я попытался инициализировать прослушиватель событий в конструкторе, но, похоже, он не работает.

Это мой класс: 

class SelectionMenu extends React.Component {
    constructor(props: Readonly<{}>){
        super(props);
        this.listenForAccordion = this.listenForAccordion.bind(this);
    }

    // opens and closes the accordian menu 
    public listenForAccordion(): void {
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight){
                panel.style.maxHeight = null;
                } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
                } 
            });
        }
    }

    public render() {
        return (
        <div className="App-selectionmenu">
            <button className="Accordion" onClick={this.listenForAccordion}>Section 1</button>
            <div className="Panel">
            <p>Lorem ipsum...</p>
            </div>

            <button className="Accordion" onClick={this.listenForAccordion}>Section 2</button>
            <div className="Panel">
            <p>Lorem ipsum...</p>
            </div>

            <button className="Accordion" onClick={this.listenForAccordion}>Section 3</button>
            <div className="Panel">
            <p>Lorem ipsum...</p>
            </div>

        </div>
        );
    }
}

1 Ответ

0 голосов
/ 02 ноября 2018

Вместо того, чтобы вручную манипулировать DOM, вы можете сохранить информацию строки аккордеона в состоянии вашего компонента и установить строку равной active при нажатии и изменить стили, применяемые к этой строке в методе рендеринга.

Пример 

class SelectionMenu extends React.Component {
  state = {
    rows: [{ active: false }, { active: false }, { active: false }]
  };

  onClick = index => {
    this.setState(previousState => {
      const rows = [...previousState.rows];
      rows[index] = { ...rows[index], active: !rows[index].active };
      return { rows };
    });
  };

  render() {
    return (
      <div className="App-selectionmenu">
        {this.state.rows.map((row, index) => (
          <div key={index}>
            <button className="Accordion" onClick={() => this.onClick(index)}>
              Section 1
            </button>
            <div className="Panel">
              <p>Lorem ipsum... {row.active && " (Active!)"}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<SelectionMenu />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
...