Reactjs 反应输入或物料ui文本字段在物料ui树视图中不起作用

被困在一个奇怪的情况下，当将react输入和material ui TextField放在material ui树视图中时，两者都不起作用。从树上拔出来的时候也是一样。分享下面的代码

CustomTreeView.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;

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

import React，{useState}来自“React”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
常量MyInput=（）=>{
const inputState=useState（“”）；
const[value，setValue]=输入状态；
返回(
setValue（e.currentTarget.value）}
/>
设置值（“”）}>重置
当前值：{value | |“N/A”}

);
};
const CustomTreeView=（）=>(
);
导出默认CustomTreeView；

index.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;

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

从“React”导入React；
从“react dom”导入react dom；
从“/treeView”导入CustomTreeView；
导入“/styles.css”；
函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
TreeView
支持各种键盘导航功能，例如在节点之间移动箭头键，以及移动到包含以键入的字符开头的文本的节点的文本字符。在
TreeItem
中，使用
onKeyDown
事件，并在为可能的导航处理字符后，使用它。此使事件不具有在输入字段中键入的默认效果

您可以通过将
onKeyDown={e=>e.stopPropagation（）}
添加到您的输入中，防止当焦点集中在您的输入上时，keyDown事件传播到
TreeItem
来修复此问题，如下所示

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

constmyinput=（）=>{
const inputState=useState（“”）；
const[value，setValue]=输入状态；
返回(
e、 stopPropagation（）}
占位符=“在此处键入…”
value={value}
onChange={e=>setValue（e.currentTarget.value）}
/>
设置值（“”）}>重置
当前值：{value | |“N/A”}

);
};


同样的方法也适用于。
TreeView
支持各种键盘导航功能，例如在节点之间移动箭头键，以及移动到包含以键入的字符开头的文本的节点的文本字符。在
TreeItem
中，使用
onKeyDown
事件，并在处理字符后r可能的导航，它。这可以防止事件在输入字段中键入的默认效果

您可以通过将
onKeyDown={e=>e.stopPropagation（）}
添加到您的输入中，防止当焦点集中在您的输入上时，keyDown事件传播到
TreeItem
来修复此问题，如下所示

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

constmyinput=（）=>{
const inputState=useState（“”）；
const[value，setValue]=输入状态；
返回(
e、 stopPropagation（）}
占位符=“在此处键入…”
value={value}
onChange={e=>setValue（e.currentTarget.value）}
/>
设置值（“”）}>重置
当前值：{value | |“N/A”}

);
};


同样的方法也适用于