Javascript 材质UI选择，如何应用：单击输入时，将样式内的焦点放在选择上？

我正在div组件中使用Select：

<div className="custom-filter custom-filter-data">
            <DateRangeIcon className="search-icon"/>
            <FormControl variant='standard' ref={addrRef} className= 
                {classes.formControl}>                
              <Select
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                defaultValue=""
                onFocus={(e) => {addrRef.current.focus()}}
                displayEmpty
              >
                <MenuItem value="" disabled>
                  Seleziona data
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            </FormControl>
              //other components
         </div>

我需要在单击select输入时触发对select的关注，以便在父容器的样式中利用：focus。现在，其中的parent:focus正在处理onChange事件（当我选择MenuItem时）。如您所见，我尝试过使用useRef（），但不起作用。。。似乎当用户点击select的输入时，它会阻止所有其他焦点

---

默认情况下，

Select

在一个窗口中打开其选项的弹出窗口（通过

菜单

组件实现）。这意味着菜单项不是DOM中

div

的后代，因此当焦点位于菜单或菜单项上时，

div

上的

：focus in

选择器不匹配

您可以通过将

MenuProps={{{disablePortal:true}}

添加到

Select

来更改此行为

相关文件：

• • 记录

    MenuProps

    prop
• • 记录

    禁用门户

    道具（

    菜单

    利用

    弹出窗口

    ，它利用

    模式

    ）

以下是您的沙盒的修改版本：

import React from "react";
import ReactDOM from "react-dom";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import "./styles.css";

const App = () => {
  const [value, setValue] = React.useState("");
  return (
    <div className="custom-filter custom-filter-data">
      <FormControl>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          style={{ minWidth: "100px" }}
          value={value}
          input={<Input id="age-simple" />}
          onChange={(event) => setValue(event.target.value)}
          MenuProps={{ disablePortal: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty........</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/Input”导入输入；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入选择；
导入“/styles.css”；
常量应用=（）=>{
const[value，setValue]=React.useState（“”）；
返回(
年龄
setValue（event.target.value）}
MenuProps={{disablePortal:true}}
>
没有一个
十
二十
三十。。。。。。。。
);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
你能提供一个可运行的示例吗？你能进一步澄清你的问题吗。很难理解你想要什么。如果你想在用户单击
SelectInput
时执行一些代码，请附加一个焦点侦听器，如下所示：
selectonfocus={e=>console.log（'focus'）}/>
你能把你的代码放在CodeSandbox上吗？你使用的是MUI v1吗？现在不支持，而且当我试图将引用传递给组件时，你的CodeSandbox没有运行。@7月，你可以在Material UI文档和许多使用Material UI v4的StackOverflow问题中找到许多CodeSandbox示例。使用v1的CodeSandbox没有帮助这是我一直在寻找的东西，先生，如果我打开“选择”菜单并在元素外部单击关闭它，而不选择任何菜单选项，则焦点将停留在具有此气泡效果的父容器上（模糊+焦点）.有一种方法可以消除这种影响，在我不选择该选项而只关闭菜单时移除焦点？我已经尝试过，但没有成功。。。
import React from "react";
import ReactDOM from "react-dom";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import "./styles.css";

const App = () => {
  const [value, setValue] = React.useState("");
  return (
    <div className="custom-filter custom-filter-data">
      <FormControl>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          style={{ minWidth: "100px" }}
          value={value}
          input={<Input id="age-simple" />}
          onChange={(event) => setValue(event.target.value)}
          MenuProps={{ disablePortal: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty........</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

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