跳到主要内容

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-