如何創建具有可選值的受控組件？

Question

在 React 中，我試圖創建一個表單，其中一些值是可選的。 我有以下TypeScript接口：

export interface DataModel {
    title:      string,
    count?:     number,
}

count是可選的，但如果設置了，它必須是一個數字。

我已經像這樣設置了我的初始 object：

const INITIAL_VALUE = {
  title: "",
  count: undefined
}

const dataItem = useState(INITIAL_VALUE);

然后我創建一個表單：

<form onSubmit = { handleSave }>
  <input
    name     = "title"
    value    = { dataItem.title}
    onChange = { handleChange }
    type     = "text"
    placeholder = "Enter title"
  />
  <input
    name        = "count"
    value       = { dataItem.count}
    onChange    = { handleChange }
    type        = "number"
  />
</form>

所以count輸入最初得到一個undefined的值，但是當我輸入一個值時，我得到了錯誤：

一個組件正在改變一個不受控制的輸入以被控制

我可以通過用一個值初始化它來避免這種情況，但由於它是可選的，我不想這樣做。 我該如何處理？

Answer 1

當您將組件的 value 屬性定義為未定義時，它本質上意味着該組件是一個不受控制的組件。 但是，如果在下一個周期中您有一個 value 屬性，則組件的行為會從 unControlled 更改為受控。

要解決此問題，您可以為輸入添加默認值

<form onSubmit = { handleSave }>
  <input
    name     = "title"
    value    = { dataItem.title || ''}
    onChange = { handleChange }
    type     = "text"
    placeholder = "Enter title"
  />
  <input
    name        = "count"
    value       = { dataItem.count || 0}
    onChange    = { handleChange }
    type        = "number"
  />
</form>

Answer 2

您應該提供適當的初始值。 而且，這可能是0或空字符串 - "" 。 即使輸入類型是number ，空字符串也應該沒問題。 因為e.target.value始終是string 。

如果要將其存儲為數字，請在事件處理程序中使用parseInt 、 parseFloat或Number （檢查詳細信息以確保它們符合需要）將值轉換為數字，或者在為 API 調用制作有效負載之前執行此操作。

因此，您應該簡單地將接口和初始值定義為：

export interface DataModel {
  title: string;
  count: number | ""; // count is a number or empty string
}

const INITIAL_VALUE = {
  title: "",
  count: "",
};

這樣，組件始終保持為受控組件。