Не удалось передать элемент панели аккордеона на вызов действия - PullRequest
Новая
       25

Не удалось передать элемент панели аккордеона на вызов действия

0 голосов
/ 19 декабря 2018

Как я могу передать item._id из выбранного элемента в вызов действия "getSubPanels"?«Подпанели» - раздел похож на «панели».Идея состоит в том, чтобы получить данные для дополнительной панели и затем открыть ее. 

    getSub = (event) => {
    this.props.dispatch(getSubPanels(event.target.key));
}

render() {

const subpanels ...

    const panels =
        <Accordion.Accordion panels={
            this.props.list.map((item) => {
                return {
                    key: item._id, title: item.name, content: { content: subpanels }
                }
            })
        } onTitleClick={this.getSub}  />

    let rootpanel = this.props.rootlist.map((root) => {
        return {
            key: root._id, title: root.name, content: { content: panels }
        }
    })

    return (
        <div className="ui one column stackable center aligned page grid">
            <div className="column six wide">
                <Accordion panels={rootpanel} defaultActiveIndex={0} styled />
            </div>
        </div>
    )

Аккордеонная панель открывается сейчас, когда настраивается activeIndex вручную, но как я могу установить ее динамически?Кажется, что при отладке «this.index» имеет правильный индекс. 

    getSub = id => event => {
    console.log(id);
    if (this.state.activeIndex > -1) {
        this.setState({ activeIndex: -1 });
    } else {
        this.props.dispatch(getSubPanels(id));
        // this.setState({activeIndex:this.index}); //Doesn't work
        this.setState({ activeIndex: 3 }); // Works
    }
}

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Таким образом я мог бы получить функцию вызова на панели аккордеона и обработать панели.

Функция: 

getSub = panelProps => event => {
console.log(panelProps.panelActiveId);
var old_activeIndex = this.state.panelActiveIndex;
var active = -1;
var i = -1;
if (this.state.panelActiveIndex > -1) {
  this.setState({ panelActiveIndex: -1 });
}
this.getSubList(panelProps.panelActiveId);
for (i = 0; i < panelProps.idList.length; i++) {
  if (panelProps.panelActiveId === panelProps.idList[i]._id) {
    active = i;
  }
}
if (old_activeIndex !== active) {
  this.setState({ subPanelActiveIndex: -1 });
  this.setState({ panelActiveIndex: active });
}

};

Панель аккордеона: 

  let panel1 = (
  <Accordion.Accordion
    panels={this.list.map(item => {
      listIdx = listIdx + 1;
      idList.push({ listIdx: listIdx, _id: item._id });
      return {
        key: item._id,
        title: item.name,
        content: { content: subPanels },
        onTitleClick: this.getSub({
          panelActiveId: item._id,
          idList: idList
        })
      };
    })}
    activeIndex={this.state.panelActiveIndex}
  />
);

Полный пример здесь: https://codesandbox.io/s/l4m61qmr3q

0 голосов
/ 19 декабря 2018

Вы можете перенести свою функцию на карту, а затем предварительно сконфигурировать свою функцию с идентификатором: 

getSub = id => event => {
    console.log(id)
    this.props.dispatch(getSubPanels(event.target.key));
}

render() {
    const panels =
        <Accordion.Accordion panels={
            this.props.list.map((item) => {
                return {
                    key: item._id,
                    title: item.name,
                    content: { content: subpanels },
                    onTitleClick: this.getSub(item._id)
                }
            })
        } />
...