useControlled
useControlled
是一个自定义 hook,帮助你管理受控组件。它是 useState
的一个包装器,允许你从外部控制组件的值。
备注
useControlled
组件不支持在受控和非受控之间切换,也不支持传递函数更新函数,可以参考这个讨论 https://github.com/adobe/react-spectrum/issues/2320
Usage
实时编辑器
function Demo() { const [state, setState] = useState<string>(""); const [value, setValue] = useControlled(state, ""); const [value1, setValue1] = useControlled(undefined, "unControlled value"); const handleChange = (event) => { setState(event.target.value); }; const handleChange1 = (event) => { setValue1(event.target.value); }; return ( <> <input value={value} onChange={handleChange} /> <p>Controlled Value: {value}</p> <input value={value1} onChange={handleChange1} /> </> ); }
结果
Loading...
API
useControlledState
Returns
[T, (value: T) => void]
: 包含以下元素的元组:
- 当前值。
- 更新当前值的函数。
Arguments
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
value | 受控值 | T | undefined (必填) | - |
defaultValue | 默认值 | T (必填) | - |
onChange | 值改变时的回调 | ((v: T, ...args: any[]) => void) | undefined | - |