是否可以在材质树视图中将文本字段组件添加为树项答案

【问题标题】：Is it possible to add textfield component as a tree item in Material Tree View是否可以在材质树视图中将文本字段组件添加为树项
【发布时间】：2019-08-19 13:05:04
【问题描述】：

我正在创建一个材质 UI 树视图组件。这里我的树有几个树项作为子项。我的目标是我将能够更新孩子的名字。所以我尝试使用树项目标签内的文本字段组件。但它没有用。谁能帮我如何重命名它的孩子？换句话说，我需要一个可编辑的树。

这里我使用了 Textfied，如下所示。

const  item = <TextField
name="Application"
label="Application" readOnly={false}></TextField>;
 <TreeItem nodeId="2" label={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>
  );
}

【问题讨论】：

标签： reactjs react-native material-ui

【解决方案1】：

您的代码似乎没问题。究竟是什么“没用”？

这是一个代码框： https://codesandbox.io/s/tree-with-textfield-sde8y

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

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,
    flexGrow: 1,
    maxWidth: 400
  },
  inputInput: {
    padding: "4px 8px"
  }
});

export default function FileSystemNavigator() {
  const classes = useStyles();
  const [value, setValue] = React.useState("Custom item");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="Applications">
        <TreeItem
          nodeId="2"
          label={
            <TextField
              value={value}
              variant="outlined"
              InputProps={{ classes: { input: classes.inputInput } }}
              onChange={handleChange}
            />
          }
        />
        <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>
  );
}

【讨论】：