遇到一种奇怪的情况，即当放入 material-ui TreeView 时，无论是 react input 还是 material-ui TextField 都不起作用。拉出 TreeView 时同样的工作。分享下面的代码

自定义树视图.js

import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

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";

const MyInput = () => {
  const inputState = useState("");
  const [value, setValue] = inputState;
  return (
    <>
      <input
        placeholder="Type here…"
        value={value}
        onChange={e => setValue(e.currentTarget.value)}
      />
      <button onClick={() => setValue("")}>Reset</button>
      <p>Current value: {value || "N/A"}</p>
    </>
  );
};

const CustomTreeView = () => (
  <>
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
      <TreeItem nodeId="1" label="TreeView">
        <Grid
          container
          direction="row"
          justify="flex-start"
          alignItems="center"
          spacing={1}
        >
          <Grid
            container
            direction="row"
            justify="flex-start"
            alignItems="center"
            item
            xs={12}
          >
            <Paper>
              <MyInput />
            </Paper>
          </Grid>
        </Grid>
      </TreeItem>
    </TreeView>
  </>
);

export default CustomTreeView;

索引.js

import React from "react";
import ReactDOM from "react-dom";

import CustomTreeView from "./treeView";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <CustomTreeView />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);