如何创建具有可选值的受控组件？

Question

在 React 中，我试图创建一个表单，其中某些值是可选的。我有以下 TypeScript 接口：

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

count是可选的，但如果设置了，则必须是数字。

我已经这样设置了我的初始对象：

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，但是当我输入一个值时，我得到错误：

A component is changing an uncontrolled input to be controlled

我可以通过用一个值对其进行初始化来避免这种情况，但由于它是可选的，所以我不想这样做。我该如何处理？

Answer 1

当你将一个组件的值属性定义为undefined时，本质上意味着该组件是一个非受控组件。但是，如果在下一个循环中您有一个值属性，组件的行为将从不受控制变为受控。

要解决此问题，您可以为输入添加默认值

<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 or Number (check details to make sure they fit the need) 将值转换为数字，或者在为 API打电话。

因此，您应该简单地将接口和初始值定义为：

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

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

这样，组件始终作为受控组件。

如何创建具有可选值的受控组件？

How do I create a controlled component with an optional value?

typescript

reactjs

controlled-component