Как набрать параметр события функции onFocus для пользовательского интерфейса ввода - PullRequest
Новая
       20

Как набрать параметр события функции onFocus для пользовательского интерфейса ввода

0 голосов
/ 24 апреля 2020

Я создаю пользовательский выпадающий список, используя материал Input и Popper. Когда пользователь фокусируется на Input, я хочу установить popper open на true. Я также использую машинопись. 

import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Input from '@material-ui/core/Input';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import React from 'react';

export function PlaceTreeSearch() {
  const [searchTerm, setSearchTerm] = React.useState('');
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value);
  };

  const onFocus = (event: any) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  return (
    <div>
      <ClickAwayListener onClickAway={handleClose}>
        <div>
          <Input
            id='custom-select'
            onChange={handleSearchTermChange}
            onFocus={onFocus}
            value={searchTerm}
            placeholder='Search'
          />
          <Popper
            open={open}
            anchorEl={anchorEl}
            transition={true}
            placement='bottom-start'
            disablePortal={true}
            style={{ zIndex: 999, width: '100%' }}
          >
            {({ TransitionProps }: any) => {
                return (
                <Grow
                    {...TransitionProps}
                    style={{ transformOrigin: '0 0 0' }}
                >
                    <Paper>
                        <MenuList autoFocusItem={open} id="menu-list-grow">
                            <MenuItem>Profile</MenuItem>
                            <MenuItem>My account</MenuItem>
                            <MenuItem>Logout</MenuItem>
                        </MenuList>
                    </Paper>
                </Grow>
            )}}
          </Popper>
        </div>
      </ClickAwayListener>
    </div>
  );
}

В настоящее время у меня есть функция onFocus следующим образом 

  const onFocus = (event: any) => {
    setAnchorEl(event.currentTarget);
  };

Но я хочу правильно набрать event вместо того, чтобы давать any.

Я попробовал следующее 

  const onFocus = (event: React.MouseEvent<EventTarget>) => {
    setAnchorEl(event.currentTarget as HTMLElement);
  };

Но это выдает следующую ошибку 

Type '(event: React.MouseEvent<EventTarget, MouseEvent>) => void' is not assignable to type '(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void'

Как я могу исправить эту ошибку?

1 Ответ

1 голос
/ 24 апреля 2020

Использовать предложенный тип было бы хорошо 

FocusEvent<HTMLInputElement | HTMLTextAreaElement>

Это распространенный способ сделать это, и это метод того, как эти стеки сообщений об ошибках создаются и используются.

...