英文:
MUI tree cancel first item collapse event
问题
I am using v5 MUI, and How to cancel the collapse event of the first item?
Like ALL in the picture
and remove dropdown icon
like list item in the picture
英文:
i am using with v5 MUI, and How to cancel the collapse event of the first item?
Like ALL in the picture
and remove dropdown icon
like list item in the picture
答案1
得分: 0
据我所知，无法在非受控模式下禁用单个TreeItem的展开/折叠功能（如果您正在使用非受控模式的话）。您可以通过将展开的项目列表保持在状态中，将该列表传递给TreeView的expanded属性，并通过不为您不希望折叠的TreeItem（s）提供点击处理程序来轻松将您的TreeView切换到受控模式。例如：
...// 默认情况下将顶级节点的nodeId设置为"expanded"const [expanded, setExpanded] = React.useState(["1"]);// 根据您的选择处理展开逻辑（这只是一个示例）const createHandler = (id) => () => {if (!expanded.includes(id)) {setExpanded([...expanded, id]);} else {setExpanded(expanded.filter((i) => {return i !== id && !i.startsWith(`${id}.`);}));}};...return (<TreeViewclassName={classes.root}defaultCollapseIcon={<ExpandMoreIcon />}defaultExpandIcon={<ChevronRightIcon />}expanded={expanded}>{/* 不要为此节点提供点击处理程序，以防止其折叠 */}{/* 注意：我将一个空片段传递给`collapseIcon`属性，以便不显示折叠图标 */}<TreeItem nodeId="1" label="All Items" collapseIcon={<></>}>{/* 为所有可折叠子节点提供点击处理程序 */}<TreeItemnodeId="2"label="Second Level Item"onClick={createHandler("2")}/>...</TreeView>);...
上面的示例还包括一种通过将空的React片段传递给collapseIcon属性来删除折叠图标的方法——但如果您更喜欢，也可以使用一些巧妙的CSS来实现这一点。
工作示例代码Sandbox： https://codesandbox.io/s/material-demo-forked-4nmsp6?file=/demo.tsx:1514-1699
英文:
To my knowledge, there's no way to disable the expand/collapse functionality of an individual TreeItem in uncontrolled mode (if that's what you're running). Presumably, you should be able to easily change your TreeView to run in controlled mode, by keeping the expanded item list in state, passing that list to the TreeView's expanded prop, and then force it to keep top-level items expanded by not providing a click handler for the TreeItem(s) that you don't want to collapse. For example:
...// Setting the top-level node's nodeId to "expanded", by defaultconst [expanded, setExpanded] = React.useState(["1"]);// Handle the expand logic however you choose (this is just an example)const createHandler = (id) => () => {if (!expanded.includes(id)) {setExpanded([...expanded, id]);} else {setExpanded(expanded.filter((i) => {return i !== id && !i.startsWith(`${id}.`);}));}};...return (<TreeViewclassName={classes.root}defaultCollapseIcon={<ExpandMoreIcon />}defaultExpandIcon={<ChevronRightIcon />}expanded={expanded}>{/* Don't provide a click handler to this node so it won't collapse */}{/* Note: I'm passing an empty fragment to the `collapseIcon` prop so no collapse icon is displayed */}<TreeItem nodeId="1" label="All Items" collapseIcon={<></>}>{/* Provide a click handler for all collapsible children */}<TreeItemnodeId="2"label="Second Level Item"onClick={createHandler("2")}/>...</TreeView>);...
The example above also includes a method for removing the collapse icon by passing an empty React Fragment to the collapseIcon prop -- But you could also achieve this with some clever CSS, if you prefer.
Working CodeSandbox: https://codesandbox.io/s/material-demo-forked-4nmsp6?file=/demo.tsx:1514-1699
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论