Reactjs 是否可以在材质树视图中将textfield组件添加为树项

我正在创建一个材质UI树视图组件。在这里，我的树的子项很少。我的目标是能够更新子项的名称。因此我尝试使用树项标记中的文本字段组件。但它不起作用。 谁能帮我给它的孩子们重新命名吗？ 换句话说，我需要一个可编辑的树

在这里，我使用了如下文本

const  item = <TextField
name="Application"
label="Application" readOnly={false}></TextField>;
 <TreeItem nodeId="2" label={item} />

const item=；

我的代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import TreeItem from '@material-ui/lab/TreeItem';
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles({
  root: {
    height: 216,
  },
});

export default function FileSystemNavigator() {
  const classes = useStyles();
const  item = <TextField
name="Application"
label="Application" readOnly={false}></TextField>;
  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
       defaultExpanded={["1"]}
    >

      <TreeItem nodeId="1" label="Application">

        <TreeItem nodeId="2" label={item} />
        <TreeItem nodeId="3" label="Chrome" />
        <TreeItem nodeId="4" label="Webstorm" />
      </TreeItem>
      <TreeItem nodeId="5" label="Documents">
        <TreeItem nodeId="6" label="Material-UI">
          <TreeItem nodeId="7" label="src">
            <TreeItem nodeId="8" label="index.js" />
            <TreeItem nodeId="9" label="tree-view.js" />
          </TreeItem>
        </TreeItem>
      </TreeItem>
    </TreeView>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles({
根目录：{
身高：216，
},
});
导出默认函数FileSystemNavigator（）{
const classes=useStyles（）；
常数项=；
返回(
);
}

您的代码似乎没问题。到底是什么“不起作用”

这是一个代码沙盒：

以下是我的代码，以防以后删除该沙箱：

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
从“@material ui/core/TextField”导入TextField；
const useStyles=makeStyles({
根目录：{
身高：216，
flexGrow:1，
最大宽度：400
},
输入输出：{
填充：“4px 8px”
}
});
导出默认函数FileSystemNavigator（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（“自定义项”）；
常量handleChange=（事件：React.ChangeEvent）=>{
设置值（event.target.value）；
};
返回(
);
}