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, "非受控值");

  const handleChange = (event) => {
    setState(event.target.value);
  };

  const handleChange1 = (event) => {
    setValue1(event.target.value);
  };

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>受控值：{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	-