反应输入或材质用户界面TextField在材质用户界面TreeView中不起作用 [英] React input or material-ui TextField not working inside material-ui TreeView

问题描述

遇到一种奇怪的情况，当放入Material-UI TreeView中时，无论是反应输入还是Material-UI TextField都不起作用.从TreeView中拉出时，相同的工作.分享下面的代码

CustomTreeView.js

  import React，{useState} from"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；const MyInput =()=>{const inputState = useState(");const [value，setValue] = inputState;返回 (<><输入占位符="在此处输入..."值= {值}onChange = {e =>setValue(e.currentTarget.value)}/>< button onClick = {()=>setValue(")}>重置</button><p>当前值:{值||"N/A"}</p></>);};const CustomTreeView =()=>(<>< TreeViewdefaultCollapseIcon = {< ExpandMoreIcon/>}defaultExpandIcon = {< ChevronRightIcon/>}>< TreeItem nodeId ="1" label ="TreeView"><网格容器direction ="row"justify ="flex-start"alignItems ="center"间距= {1}><网格容器direction ="row"justify ="flex-start"alignItems ="center"物品xs = {12}><纸张>< MyInput/></Paper></Grid></Grid></TreeItem></TreeView></>);导出默认的CustomTreeView; 

index.js

  import从反应"中反应；从"react-dom"导入ReactDOM；从"./treeView"导入CustomTreeView；导入"./styles.css"；函数App(){返回 (< div className ="App">< h1> Hello CodeSandbox</h1>< h2>开始编辑，看看会发生什么魔术！</h2>< CustomTreeView/></div>);}const rootElement = document.getElementById("root");ReactDOM.render(< App/> ;, rootElement); 

解决方案

TreeView 支持各种键盘导航功能，例如，箭头键在节点之间移动，文本字符也移动到包含以."开头的文本的节点.输入的字符.在 TreeItem 中，使用 onKeyDown 事件，并在处理了可能的导航字符后，将其

相同的方法也适用于 TextField .

Stuck with a strange situation where neither react input nor material-ui TextField works when put inside a material-ui TreeView. The same work when pulled out of the TreeView. Sharing the code below

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

解决方案

TreeView supports various keyboard navigation features such as arrow keys moving between nodes and also text characters moving to nodes that contain text starting with the characters typed. In TreeItem, the onKeyDown event is used and, after processing characters for possible navigation, it calls event.preventDefault(). This prevents the event from having its default effect of typing in your input field.

You can fix this, by preventing keyDown events from propagating to the TreeItem when focus is on your input by adding onKeyDown={e => e.stopPropagation()} to your input as shown below.

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

The same approach also works for TextField.

这篇关于反应输入或材质用户界面TextField在材质用户界面TreeView中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！