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

编程问答 2022-05-14

问题描述

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

组件正在将不受控制的输入更改为受控

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

解决方法

当你定义一个组件的 value 属性为 undefined 时，本质上意味着该组件是一个不受控制的组件。但是，如果在下一个循环中您有一个 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 或空字符串 - ""。即使输入类型是number，空字符串也应该没问题。因为 e.target.value 总是 string。

如果要将其存储为数字，请使用 parseInt、parseFloat 或 Number 将值转换为数字（检查详细信息以确保它们fit the need) 在您的事件处理程序中，或者在为 API 调用创建有效负载之前执行此操作。

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

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

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

这样组件就始终是受控组件。

controlled-componentreactjsreactjsreactjsreactjstypescripttypescripttypescript