React input 或 material-ui TextField 在 material-ui TreeView 中不起作用答案

【问题标题】：React input or material-ui TextField not working inside material-ui TreeViewReact input 或 material-ui TextField 在 material-ui TreeView 中不起作用
【发布时间】：2020-03-22 14:52:58
【问题描述】：

遇到一种奇怪的情况，即当将其放入 material-ui TreeView 时，反应输入和 material-ui TextField 都不起作用。从 TreeView 中拉出时的工作相同。下面分享代码

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;

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

【问题讨论】：

标签： reactjs input treeview material-ui

【解决方案1】：

TreeView 支持各种键盘导航功能，例如在节点之间移动的箭头键以及移动到包含以键入字符开头的文本的节点的文本字符。在TreeItem 中，使用了onKeyDown 事件，在处理字符以进行可能的导航之后，它使用calls event.preventDefault()。这可以防止事件具有在您的输入字段中键入的默认效果。

您可以通过在输入中添加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>
    </>
  );
};

同样的方法也适用于TextField。

【讨论】：