Как программно «открыть» поле Material-UI Select?

Поле выбора можно найти здесь: в демонстрации Material-UI

Кажется, что его методы унаследованы от классов меню / всплывающих окон, но я не смог понять, как, например, запустить «open», когда срабатывает событие onFocus. Это решит мои проблемы с удобством использования, связанные с клавиатурой!


reactjs inheritance material-ui
person heorling    schedule 23.02.2016    source источник
comment
Глядя на связанный документ, нет ничего, что могло бы автоматически фокусироваться или открывать список выбора. Фактически, это неоднократно поднималось на GitHub как проблема. github.com/callemall / material-ui /   -  person David L. Walsh    schedule 24.02.2016
comment
Спасибо, Дэвид. Действительно, есть много нерешенных вопросов. Я надеялся, что есть какой-то трикси-способ имитировать событие щелчка, когда происходит onDocus. Если мышь может открыть его, почему я не могу сделать это синтетически? Мои попытки там не увенчались успехом ...   -  person heorling    schedule 25.02.2016
comment
Я предполагаю, что вам придется подождать и посмотреть, закончится ли это поведение в полях Select ветки @next. Цитата из их ROADMAP.md: Новые функции, основанные на v0.16.x, имеют низкий приоритет и, скорее всего, не будут рассмотрены или объединены   -  person Dani    schedule 14.12.2016

Ответы (2)


arrow_upward
3
arrow_downward

Посмотрите на пример 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>
  );
}
person rofrol    schedule 10.06.2020

arrow_upward
0
arrow_downward

Вы можете сделать это, обратившись к узлу DOM кнопки со стрелкой вниз и вручную запустив на нем событие щелчка.

Пример, который работает в Mac Chrome на демонстрационном веб-сайте через консоль после добавления поля id mySelect в элемент DOM поля выбора для облегчения доступа:

// 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 доступен не везде, хотя теперь все в порядке)

person Pandaiolo    schedule 21.12.2016