構建一個既可以控制也可以不受控制的React組件

Question

我試圖弄清受控和不受控制的React組件之間的區別，所以我想自己可以建立一個可以是但不能同時是兩者的控件。 看來<input>所使用的模式是，如果您提供了一個value prop，那么它將被控制，否則將是不受控制的，並且您可以使用defaultValue prop將默認值提供給不受控制。

我的示例控件是一個簡單的數字遞增/遞減器，帶有用於遞增和遞減的按鈕以及一個顯示當前值的標簽。

我的問題是。

1. 我是否以正確的方式解決了這個問題。
2. 我編寫了許多測試以涵蓋我能想到的所有場景，這些測試是否全部有效，我是否錯過了任何測試。

我希望通過本示例和任何反饋來全面了解受控與非受控以及何時使用它們。

我的代碼和所有測試均在此codeandbox中提供https://codesandbox.io/s/kind-archimedes-cs0qy

但是我的組件在這里被重復了...

    import React, { useState } from "react";

    export const NumberInput = ({ onChange, value, defaultValue, min, max }) => {
      const [uncontrolledVal, setUncontrolledVal] = useState(
        defaultValue || min || 0
      );

      if (
        (value && (value > max || value < min)) ||
        (defaultValue && (defaultValue > max || defaultValue < min))
      ) {
        throw new Error("Value out of range");
      }

      const handlePlusClick = () => {
        if (value && onChange) {
          onChange(value + 1);
        } else {
          const newValue = uncontrolledVal + 1;
          setUncontrolledVal(newValue);
          if (onChange) {
            onChange(newValue);
          }
        }
      };
      const handleMinusClick = () => {
        if (value && onChange) {
          onChange(value - 1);
        } else {
          const newValue = uncontrolledVal - 1;
          setUncontrolledVal(newValue);
          if (onChange) {
            onChange(newValue);
          }
        }
      };
      return (
        <>
          <button
            data-testid="decrement"
            disabled={value ? value === min : uncontrolledVal === min}
            onClick={() => handleMinusClick()}
          >
            {"-"}
          </button>
          <span className="mx-3 font-weight-bold">{value || uncontrolledVal}</span>
          <button
            data-testid="increment"
            disabled={value ? value === max : uncontrolledVal === max}
            onClick={() => handlePlusClick()}
          >
            {"+"}
          </button>
        </>
      );
    };

Answer 1

對於像這樣的自定義增量器，不存在不受控制的版本。 不受控制適用於HTML 5中的內置輸入字段，例如文本字段，復選框或文件上傳。

受控表示輸入的值由狀態或屬性值設置，並使用自定義功能進行更新。 不受控制意味着它會自行處理其值的更改，並且要使用它們時必須手動檢索它們的值。

這可以使用類似ref的東西來完成。

如果將輸入字段的值綁定到值而不提供提供更新其值onChange的功能，則它將不會響應任何用戶輸入。 但是，您可以為其提供defaultValue，它將仍然響應用戶輸入。

您可以在這里了解更多信息： https : //reactjs.org/docs/un受控組件.html

這是否回答你的問題？