如何在“Material UI”中使用帶有 select 輸入的 onFocus 事件？

Question

如何在 Material Ui 中添加帶有 select 輸入的 onFocus 事件。 當我嘗試添加它時，發生了錯誤。使用 onFocus 事件時，select 輸入字段未獲得焦點。 但它正在處理其他類型的輸入。

這是一個簡單的演示 -

import {TextField, Button} from '@mui/material';

const Form = ({handleChange, handleFocus, handleBlur, handleSubmit}) => {
  return(
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        select
        onChange={handleChange}
        onFocus={handleFocus}
        onBlur={handleBlur}
       />
       <Button variant="contained" type="submit">Submit<Button>
    </form>
 )
}

export default Form;

Answer 1

您可以使用InputProps將事件偵聽器附加到基礎輸入元素。

import {TextField, Button} from '@mui/material';

const Form = ({handleChange, handleFocus, handleBlur, handleSubmit}) => {
  return(
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        select
        onChange={handleChange}
        InputProps={{
          onFocus: handleFocus,
          onBlur: handleBlur,
        }}
       />
       <Button variant="contained" type="submit">Submit<Button>
    </form>
 )
}

export default Form;