如何为材质ui输入输入onFocus函数事件参数答案

【问题标题】：How to type onFocus function event parameter for material ui Input如何为材质ui输入输入onFocus函数事件参数
【发布时间】：2020-04-24 07:23:49
【问题描述】：

我正在使用材质 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'

如何解决这个错误？

【问题讨论】：

标签： reactjs typescript material-ui mouseevent typescript-typings

【解决方案1】：

使用建议的类型就可以了

FocusEvent<HTMLInputElement | HTMLTextAreaElement>

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

【讨论】：