无法将反应手风琴面板项目传递给动作调用

Question

如何将item._id从所选项目传递到“getSubPanels”动作调用？ “subpanels”-section就像“panel”。想法是获取子面板的数据，然后打开它。

    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时，Accordion面板现在打开，但如何动态设置？调试时，“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
    }
}

Answer 1

您可以将函数包装在map中，然后使用id预配置函数：

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)
                }
            })
        } />

Answer 2

这样我就可以获得手风琴面板项目调用onclick功能和处理面板。

功能：

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