Question

如何将选定项目的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
    }
}

Answer 1

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

/templates/bundles/FOSUserBundle

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

无法将“反应式”手风琴面板项目传递给行动电话

2 个答案: