上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useControlledComponent

Tags:
Utilities

一个 React Hook，帮助你管理受控组件，这些组件接收满足以下类型的 value 和 onChange 属性。

export interface ControlledComponentProps<T> = {
  /**
   * 受控组件的值
   */
  value: T
  /**
   * 当受控组件的值发生变化时调用的回调
   */
  onChange: (eventOrValue: T | { target: { value: T } }) => void
}

演示

尝试清除输入并输入一些内容。

源码
React
Vue
Angular

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const input = useControlledComponent(initialValue, options)

初始值 InitialValue

组件的初始值，可以是 string、number、boolean、object、array 等。

选项 Options

export interface UseControlledComponentOptions<T = string, P extends object = object> extends UseSafeStateOptions {
  /**
   * 当受控组件的值发生变化时调用的回调
   */
  onChange?: (value: T, preValue?: T) => void
  /**
   * 当受控组件的值被重置时调用的回调
   */
  onReset?: (initialValue: T) => void
  /**
   * 受控组件的 props
   */
  props?: P
  /**
   * 受控组件的备用值
   */
  fallbackValue?: T
}

返回值

export interface UseControlledComponentReturns<T> {
  /**
   * 受控组件的值
   */
  value: T
  /**
   * 应传递给受控组件的 props
   */
  props: ControlledComponentProps<T>
  /**
   * 将受控组件的值重置为初始值
   */
  reset(): void
  /**
   * 设置受控组件的值
   */
  setValue: (value: T) => void
}