如何为 material ui Input 输入 onFocus 函数事件参数

Question

我正在使用 material ui 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'

如何修复此错误？

Answer 1

使用建议的类型就可以了

FocusEvent<HTMLInputElement | HTMLTextAreaElement>

这是一种常见的方法，也是设计和使用这些错误消息堆栈的方法。

如何为 material ui Input 输入 onFocus 函数事件参数

How to type onFocus function event parameter for material ui Input

reactjs

typescript

material-ui

mouseevent

typescript-typings