useControlledState

useControlledState 是一个允许你同时控制受控状态和不受控状态的 React Hook。如果你将状态传给 value，它就是受控状态；如果你将状态传给 defaultValue，它就是不受控状态。如果同时传入了 value 和 defaultValue，则 value 优先。

接口

function useControlledState<T>(props: Object): [T, Dispatch<SetStateAction<T>>];

参数

• propsrequired · Object
  
  • props.valueT
    

    状态的值。

  • props.defaultValueT
    

    状态的默认值。

  • props.onChange(value: T) => void
    

    状态变化时被调用的回调函数。

  • props.equalityFn(prev: T, next: T) => boolean
    

    用于比较前一个值和下一个值的函数。

返回值

• [T, Dispatch<SetStateAction<T>>]
  

  状态和 setter 函数。

示例

type ToggleProps = {
  value?: boolean;
  defaultValue?: boolean;
  onChange?: (value: boolean) => void;
};

function Toggle({ value, defaultValue, onChange }: ToggleProps) {
  const [on, setOn] = useControlledState({
    value,
    defaultValue: defaultValue ?? false,
    onChange,
  });

  return (
    <button onClick={() => setOn(prev => !prev)}>{on ? 'ON' : 'OFF'}</button>
  );
}