nshop-front-m/src/components/theme/ui/InputText.tsx

"use client";

import React from "react";
type InputType = 'text' | 'email';
function InputText({
    type = 'text',
    placeholder,
    onChange,
    onBlur,
    name,
    error,
    ref
}: {
    // 用于react-hook-form时，推荐使用useForm的 defaultValues 对整个表单设置默认值
    type?: InputType;
    placeholder: string;
    // 用于react-hook-form时，React 事件处理器类型定义中的“双变（bivariance）”特性 和返回值void的兼容性，使typescript没有提示类型错误
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur: (e: React.ChangeEvent<HTMLInputElement>) => void;
    name: string;
    error?: string;
    ref?: React.Ref<HTMLInputElement>;
}) {

    return (
        <div className="w-full">
            <input className="ly-input w-full" 
                type={type}
                placeholder={placeholder}
                onChange={onChange}
                onBlur={onBlur}
                name={name}
                ref={ref}
            />
            {error && <p className="text-red-500 text-ly-12">{error}</p>}
        </div> 
    );
}
// 设置 displayName，便于调试
InputText.displayName = 'InputText';

export default InputText;