mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-06-07 00:30:11 +08:00
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:
@@ -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}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user