富文本树视图 - 展开

处理用户如何展开条目。

受控展开

使用 expandedItems prop 来控制展开的条目。

您可以使用 onExpandedItemsChange prop 来监听展开条目的更改，并相应地更新 prop。

数据表格
日期和时间选择器
图表
树视图

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

按下 Enter 开始编辑

追踪条目展开更改

如果您想对条目展开更改做出反应，请使用 onItemExpansionToggle prop

未记录操作

数据表格
日期和时间选择器
图表
树视图

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

按下 Enter 开始编辑

将展开限制为图标容器

您可以使用 expansionTrigger prop 来决定展开交互是否应由单击图标容器而不是整个树条目内容触发。

数据表格
日期和时间选择器
图表
树视图

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

按下 Enter 开始编辑

命令式 API

要使用 apiRef 对象，您需要使用 useTreeViewApiRef hook 初始化它，如下所示

const apiRef = useTreeViewApiRef();

return <RichTreeView apiRef={apiRef} items={ITEMS}>;

当您的组件首次渲染时，apiRef 将为 undefined。在此初始渲染之后，apiRef 包含以命令方式与树视图交互的方法。

更改条目展开

使用 setItemExpansion API 方法来更改条目的展开。

apiRef.current.setItemExpansion(
  // The DOM event that triggered the change
  event,
  // The id of the item to expand or collapse
  itemId,
  // If `true` the item will be expanded
  // If `false` the item will be collapsed
  isExpanded,
);

数据表格
日期和时间选择器
图表
树视图

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

按下 Enter 开始编辑

API

请参阅下面的文档，以获取此处提及的组件的所有可用 props 和类的完整参考。