问题标签 [controlled-component]

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

count是可选的，但如果设置，它必须是一个数字。

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

然后我创建一个表单：

所以count输入最初得到一个值undefined，但是当我输入一个值时，我得到了错误：

一个组件正在改变一个不受控制的输入以被控制

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

我在代码中使用了<InputLabel>和组件Select，MenuItem如下所示：

所以，当我使用value = {''}如上所示的代码时Select，我看不到代码中的任何错误。但是，当用户选择Yes或No时，屏幕上不会显示任何内容，如下所示：

但是，当我注释掉该value = {''} 部分并像这样使用它时：

它显示用户选择Yes或No在屏幕上，但我在控制台中不断收到以下红色警告：

警告：组件正在更改类型为 undefined 的不受控输入以进行控制。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

如何解决这两个问题？

我正在使用扩展运算符遍历 Maps 对象的键，并且想知道如何从状态中派生值。

在React 文档中，它说在受控组件中，“React 状态是‘单一事实来源’”。这似乎是正确的，除非在前导零的情况下。在下面的示例中，您可以看到输入受控制，但在前导零的情况下，输入值并不总是与状态值匹配。

考试

键入前导零，因此该值类似于0010.

可以看到 in 的值state是一个整数10，但是输入显示的是0010。

我的第一个想法是这是因为组件实际上并没有重新渲染，这是真的。10和之间没有状态变化10，所以没有新的渲染。这得到了证实，因为我们没有看到“渲染”console.log 触发。

所以让我们确保我们改变了这个值。添加一个2以更改0010为00102. state 中的值现在是102，我们确认组件重新渲染......但前导零仍然存在于输入中。

这似乎不一致，因为我希望输入中的值始终与状态中的值完全匹配。为什么会这样，什么是从数字输入中修剪前导零的可靠方法？

我将使用上面的代码来问我的问题。input 元素通过用户输入（值属性）处理其状态更改，但 react 使用状态变量来处理状态更改。为了有一个常数值，我们也设置了 react 变量来处理表单元素的状态变化。

但是如果我们这样做然后通过 event.target.value 访问用户输入的值，它如何能够跟踪用户在输入字段中输入的内容，因为我们设置了 value={name}。event.target.value 不应该给我们 name 变量的值而不是用户输入

我正在尝试按照以下方式构建可重用的输入文件。

对于使用，我的表单被声明的地方，这就是我使用它的方式：

不幸的是，它不起作用。当我提交表单时，文件只是路径。没有要管理的文件[0]。

接下来我可以尝试什么？

代码工作正常，但在控制台上抛出此错误“警告：组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。决定使用受控还是在组件的生命周期内不受控制的输入元素。”

但是当我注释掉 useEffect 中的代码时，错误就消失了

我正在尝试构建一个可以受控或不受控使用的组件。类似于MaterialUI中的 TextField或ChakraUI中的 Input 。所以该组件在有或没有value道具的情况下都可以工作。构建这种组件的最佳方法是什么？

在输入字段中输入颜色名称后，当我提交表单时，出现错误：

TypeError：无法读取未定义（匿名函数）C的属性“toLowerCase”：/Users/HP/Documents/WDB/React/Practice/colors-app/src/NewPaletteForm.js:117

App.js ：（基于类的组件）

NewPaletteForm.js ：（功能组件并使用反应钩子）

颜色和调色板的验证器表单组件：

种子颜色.js：

我有这个输入代码，type="password"

它有效，但我注意到，在开发人员控制台“元素”中，您实际上可以看到密码字段的值：

可以吗，它显示这样的密码？有没有办法隐藏它？我应该使用不受控制的组件而不是受控吗？