Material-UI Select，如何在单击输入时在选择上应用 :focus-within 样式？

IT技术 javascript reactjs material-ui
2021-04-30 23:56:02

我在 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>

css容器

.custom-filter:focus-within{
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

我需要在单击选择输入时触发选择上的焦点，以利用父容器的 :focus-within 样式。现在父 :focus-within 正在处理 onChange 事件（当我选择 MenuItem 时）。正如你所看到的，我已经尝试过 useRef() 但没有工作......似乎当用户点击选择的输入时，它会阻止所有其他焦点......

https://codesandbox.io/s/react-material-ui-select-forked-8msbu?file=/src/index.js

1个回答

默认情况下，在门户中Select打开Menu其选项的弹出窗口（通过组件实现）。这意味着菜单项不是DOM中您的后代，因此当焦点位于菜单或菜单项上时，您的选择器将不匹配。div:focus-withindiv

您可以通过添加MenuProps={{ disablePortal: true }}到Select.

相关文档：

这是您的沙箱的修改版本：

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

编辑选择焦点内

其它你可能感兴趣的问题
上一篇如何在 redux 中使用 API 调用操作？ 下一篇ComponentWillUnmount 取消订阅 Firestore