fix: 修复Input组件受控与非受控切换的警告

修复React警告"A component is changing an uncontrolled input to be controlled"。

## 原因
`input.tsx`中`<input>`元素未显式处理`value`和`onChange`属性,导致父组件传值时从`undefined`切换为具体值(或反之)

## 修复方式
- 显式提取`value`和`onChange`属性
- 使用`value ?? ''`保证默认值始终为字符串,避免从`undefined`切换
- 确保组件始终以受控模式运行
This commit is contained in:
Karasukaigan
2025-07-02 01:21:35 +08:00
parent fabf4b7cd5
commit 5ff88ac765

View File

@@ -2,7 +2,7 @@ import * as React from 'react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
function Input({ className, type, ...props }: React.ComponentProps<'input'>) { function Input({ className, type, value, onChange, ...props }: React.ComponentProps<'input'>) {
return ( return (
<input <input
type={type} type={type}
@@ -13,6 +13,8 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
className className
)} )}
value={value ?? ''}
onChange={onChange}
{...props} {...props}
/> />
) )