Question

我创建了具有折叠功能的嵌套列表。一切正常，但是当我单击添加按钮时，我需要在所选项目的正下方添加内容。例如，在我随附的演示中，您将在其中看到嵌套列表。如果我选择级别1 c，然后单击添加按钮，则应将新项目添加到该所选项目的正下方。我该怎么做？任何人都可以分享我的想法吗？我甚至很难理解如何在所选项目的正下方正确显示该项目。

这是我所做的

NestedList.js

const renderChildren = (dropHandler, isExpanded) => item => (
  <React.Fragment key={item.slug}>
    <ListItem
      key={item.slug}
      dataattr={item.slug}
    >
      {"children" in item ? (
        <StyledListItem
          color="var(--secondary)"
          primary={`${item.title} - done`}
        />
      ) : (
        <StyledNavLink to="/">
          <StyledListItem
            color="var(--secondary)"
            primary={`${item.title} - done`}
          />
        </StyledNavLink>
      )}

      {"children" in item && <ExpandMore onClick={() => dropHandler(item.slug)} />}
    </ListItem>
    {"children" in item && (
      <React.Fragment>
        <Collapse in={isExpanded} timeout="auto" unmountOnExit>
          <List component="div">
            <NestedList items={item.children} />
          </List>
        </Collapse>
      </React.Fragment>
    )}
  </React.Fragment>
);

class NestedList extends React.Component {
  state = {
    isExpanded: false
  };

  dropHandler = () => this.setState({ isExpanded: !this.state.isExpanded });

  render() {
    const { items } = this.props;

    if (!items) return null; // Don't render when it shouldn't

    return (
      <React.Fragment>
        {items.map(renderChildren(this.dropHandler, this.state.isExpanded))}
      </React.Fragment>
    );
  }
}

export default NestedList;

这是演示

https://codesandbox.io/s/p3qx6pq3z0

更新

我可以在所选项目下方显示输入字段，也可以添加项目，但仅适用于第一级，不适用于嵌套项目。

https://codesandbox.io/s/vn1qr3wqm5

Answer 1

在JavaScript中将对象插入数组中的给定位置可以通过拼接来完成，然后重新渲染就可以了！

var list = ["foo", "bar"];
list.splice( 1, 0, "baz"); // position to place new object, delete objects count, object to insert

["foo", "baz", "bar"] // result

您知道基于插入按钮的位置要插入的索引...

在嵌套列表中所选项目的正下方添加项目

1 个答案: