0

我想以这种方式将自定义输入支持者传递给另一个支持者：

<FormTextField
     name="startTime"
     label="startTime"
     type="time"
     error={!!errors.startTime}
     CustomTextField={TextFieldColorTimeIcon} <-- custom TextField
     ...
/>

FormTextField 的代码：

export default function FormTextField({ name, CustomTextField, ...other }) {
    const { control } = useFormContext();
    let LocalCustomTextField = CustomTextField ? CustomTextField : TextField;

    return (
      <Controller
        name={name}
        control={control}
            render={
                ({ field, fieldState: { error } }) => (<LocalCustomTextField {...field} fullWidth error={!!error} helperText={error?.message} {...other} />)
              }
        />
      );
    }

TextFieldColorIcon 的代码：

export function TextFieldColorIcon({ sx, ...other }: TextFieldColorIconProps) {
    return <TextField
        sx={{
            ...sx,
            '& input[type="time"]::-webkit-calendar-picker-indicator': {
                filter:
                    'invert(41%) sepia(24%) saturate(301%) hue-rotate(166deg) brightness(101%) contrast(89%)',
            },
        }}
        {...other} />
}

但我有警告： 警告：不能给函数支持者提供参考。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？检查Controller. 在 TextFieldColorIcon 在 Controller 在 FormTextField 在 div

尽管没有通过参考。此警告的原因是什么，我是否以正确的方式传递自定义 TextFieldColorIcon？

4

0 回答 0