如何以编程方式“打开” Material-UI Select 字段？答案

【问题标题】：How does one programmatically 'open' a Material-UI Select field?如何以编程方式“打开” Material-UI Select 字段？
【发布时间】：2016-06-05 18:33:36
【问题描述】：

选择字段可以在这里找到：in the Material-UI demo

它的方法似乎是从菜单/弹出框类继承的，但我无法弄清楚例如当 onFocus 事件触发时如何触发“打开”。这将解决我与键盘相关的可用性问题！

【问题讨论】：

查看链接的文档，没有任何东西可以自动聚焦或打开选择列表。事实上，它已经不止一次在 GitHub 上作为问题提出。 github.com/callemall/material-ui/…
谢谢大卫。确实有很多悬而未决的问题。我希望在 onDocus 发生时有一些复杂的方法来模拟点击事件。如果鼠标可以打开它为什么我不能合成它？我的尝试在那里失败了......
我的猜测是，您将不得不等待，看看这种行为是否会出现在 @next 分支的 Select 字段中。从他们的 ROADMAP.md 中引用：“基于 v0.16.x 的新功能优先级较低，很可能不会被审查或合并”

标签： inheritance reactjs material-ui

【解决方案1】：

看例子https://material-ui.com/components/selects/#controlled-open-select

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  button: {
    display: 'block',
    marginTop: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

export default function ControlledOpenSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');
  const [open, setOpen] = React.useState(false);

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <Button className={classes.button} onClick={handleOpen}>
        Open the select
      </Button>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

【讨论】：

【解决方案2】：

您可以通过访问向下箭头按钮的 DOM 节点并在其上手动触发点击事件来实现。

在演示网站上的 Mac Chrome 上运行的示例，通过控制台，在选择字段 DOM 元素中添加了一个“mySelect”id 字段以便于访问：

// Initialize a click event (mouseup seem more cross browser)
var evt = document.createEvent('MouseEvents');
evt.initEvent('mouseup', true, false);
// The down arrow elment is the only SVG element un the select
var elm = document.querySelector('#mySelect svg')
// Dispatch the event (reusable)
elm.dispatchEvent(evt);

如果此解决方案适合您的代码，您必须检查完整的跨浏览器/平台方式以创建正确的事件，并选择箭头元素（querySelector 并非在任何地方都可用，尽管it's quite OK now）

【讨论】：