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

在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>

因此，

计数

输入最初得到的值为

未定义

，但当我输入一个值时，我得到了错误：

组件正在将非受控输入更改为受控输入

---

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

当您将组件的value属性定义为未定义时，它本质上意味着该组件是一个不受控制的组件。但是，如果在下一个周期中，您有一个值属性，则组件的行为将从不受控变为受控

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

<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>

---

您应该提供适当的初始值。这可能是

0

或空字符串-

“

”。即使输入类型为

数字

，空字符串也可以。因为

e.target.value

始终是字符串

如果要将其存储为数字，请在事件处理程序中使用或（检查详细信息以确保它们）将该值转换为数字，或者在为API调用生成有效负载之前执行此操作

因此，您只需将接口和初始值定义为：

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

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

---

这样，组件始终保持为受控组件。

这里不是更好吗？@Yoshi是的，也可以使用这里的问题是，我没有可以使用的默认值。0可能表示“计数”为0，但也可能表示尚未设置。我需要能够区分这两个选项。如果这是你的情况，你可以忽略警告，它实际上并不影响你的代码的工作，你也可以使用。请注意，当您输入类似于

123XYZ

（类似于

Number（“123XYZ”）

）的内容时，其值为

NaN

。谢谢！这会有用的。对不起，我这周一直在做其他事情，直到今天才有机会回到这件事上！