TextField组件onChange属性类型不兼容的TypeScript错误求助

错误原因 #

你在使用样式化后的Material-UI TextField组件（StyledField）时，给onChange传入了类型为SelectChangeEvent的处理函数，但TextField组件在非select模式下，onChange期望的是ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>类型。同时你的inputProps类型定义缺失了大量实际用到的属性，进一步加剧了类型冲突。

解决方案 #

1. 补全props类型定义 #

先把inputProps补充完整，包含所有组件实际用到的属性，同时复用Material-UI的内置类型减少重复定义：

import { TextFieldProps } from '@mui/material/TextField';
import { ReactNode } from 'react';

type inputProps = {
  onChange?: (value: string) => void;
  style?: React.CSSProperties;
  selected?: string;
  title?: string;
  select?: boolean;
  type?: TextFieldProps['type'];
  placeholder?: string;
  disabled?: boolean;
  defaultValue?: string;
  options?: Item[];
  endAdornment?: ReactNode;
  helperText?: string;
};

interface Item {
  key: string;
  title: string;
}

2. 兼容两种模式的事件类型 #

因为组件会在普通输入和选择器模式之间切换，所以给handleChange的事件参数设置联合类型，同时兼容两种模式的事件类型：

import { SelectChangeEvent } from '@mui/material/Select';
import { ChangeEvent } from 'react';

const handleChange = (
  event: SelectChangeEvent | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
  const value = event.target.value as string;
  setValue(value);
  props.onChange?.(value);
};

3. 修正组件内部逻辑 #

移除不必要的状态（比如title不需要用useState存储，直接用props.title即可），同时给普通输入模式的StyledFields也绑定onChange（原代码遗漏了这一步）。

完整修正代码 #

import React, { useState, ChangeEvent } from 'react';
import { Box, FormControl, FormHelperText, MenuItem, TextFieldProps } from '@mui/material';
import { SelectChangeEvent } from '@mui/material/Select';
// 引入你的样式化组件
import StyledField from './StyledField';
import StyledFields from './StyledFields';

type inputProps = {
  onChange?: (value: string) => void;
  style?: React.CSSProperties;
  selected?: string;
  title?: string;
  select?: boolean;
  type?: TextFieldProps['type'];
  placeholder?: string;
  disabled?: boolean;
  defaultValue?: string;
  options?: Item[];
  endAdornment?: React.ReactNode;
  helperText?: string;
};

interface Item {
  key: string;
  title: string;
}

export default function TextInputField(props: inputProps) {
  // 优化value初始化逻辑
  const [value, setValue] = useState<string>(props.selected || props.defaultValue || "");

  const handleChange = (
    event: SelectChangeEvent | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const inputValue = event.target.value as string;
    setValue(inputValue);
    props.onChange?.(inputValue);
  };

  return (
    <Box
      component='form'
      noValidate
      sx={{ display: 'flex' }}
      style={{ margin: '10px 0px' }}
    >
      <FormControl
        style={{
          outline: 'none !important',
          width: '100%'
        }}
      >
        {props.select === true ? (
          <StyledField
            value={value}
            type={props.type}
            placeholder={props.placeholder}
            disabled={props.disabled}
            select={props.select}
            size='small'
            title={props.title}
            defaultValue={props.defaultValue}
            onChange={handleChange}
          >
            {props.options?.length ? props.options.map((option, i) => (
              <MenuItem key={i} value={option.key || ""}>
                {option.key === props.selected ? <em>{option.title}</em> : option.title}
              </MenuItem>
            )) : null}
          </StyledField>
        ) : (
          <StyledFields
            value={value}
            type={props.type}
            placeholder={props.placeholder}
            disabled={props.disabled}
            endAdornment={props.endAdornment}
            size='small'
            title={props.title}
            defaultValue={props.defaultValue}
            onChange={handleChange}
          />
        )}

        <FormHelperText style={{ textAlign: 'right', color: 'rgba(48, 48, 48, 0.5)', fontSize:'12px', fontWeight:'400' }}>
          {props.helperText}
        </FormHelperText>
      </FormControl>
    </Box>
  );
}

内容的提问来源于stack exchange，提问作者Md Mokarram Hossain