问题标签 [controlled-component]

Codesandbox：https ://codesandbox.io/s/magical-black-vp1r0?file=/src/dropdown-selector.js

我正在尝试构建一个非常具体的组件，但我不确定它是否可能。请告诉我。

要求：

• SelectBox 必须是受控输入
• DropdownSelector 组件可以以任何可能的方式使用（也就是不要更改 App.js）
• 单击下拉选项中的选项之一时，该值将替换输入字段值

原因

• 我正在使用 react-intl，它仅适用于受控输入（如果值受控，则立即转换）
• 该组件是 monorepo 的一部分，这意味着 UI 组件应该足够通用，可以以任何可能的方式使用
• 该组件的目的是一个下拉选择器，这意味着用户可以输入一个单词，自动完成选项将下拉供用户单击并“完成”他们的搜索

困境是，如果我想控制组件，我必须只使用setVal方法来改变状态/值。例如，val只能通过setVal典型的反应输入组件进行更改，如下所示：

但是，为了让下拉选项替换输入组件的值，它必须更改值状态。但是受控组件只有一种更改状态的方法，setVal在这种情况下，我无法更改 onChange 使用 setVal 的方式，因为这是一个应该能够以任何通用方式使用的 UI 组件。

所以我的问题是：即使我听起来很虚伪，有没有办法在不使用的情况下改变输入组件的值setVal？

上面代码框中的具体示例。具体问题在 DropdownSelector.js 的第 128 行。非常感谢您提前。

尽管设置了初始状态，但在使用受控组件时收到以下警告： 警告：组件正在将未定义类型的受控输入更改为不受控。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

这是我的代码：

如果我在输入中输入John作为fName和Doe作为lName，则标题应该是Hello John Doe，但我刚刚收到带有警告的Hello John 。使用下面的条件将消除警告，但我只是再次得到Hello John：

如何在没有警告的情况下同时显示fName和lName？

我在 React 组件中使用带有类型文件的受控输入。如果我在输入组件中选择了一个文件并切换主组件的显示/隐藏行为。在 Component re-renders 输入不起作用并抛出以下错误：

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

我正在尝试使用 Ant Design 制作一个带有受控输入的表格组件。

我从 Antd doc: Table with editable rows开始，然后 1) 模块化代码 2) 使用 Hooks 和 3) 删除了 Antd Forms 的使用。

我有 4 个组件

• 桌子
• 细胞
• 输入节点
• 按钮

在表格组件内部，我有 3 个状态：

• 编辑 ==> 当编辑设置为 TRUE 时，该行是可编辑的并接受用户输入
• currentRowValues ==> currentRowValues 将保存可编辑行的当前用户输入
• rowList ==> 按下保存后，currentRowValues 将填充 rowList

但是当我按下给定行的编辑图标时：

• InputNumber 将丢失当前值并且不会根据用户输入而改变
• DatePicker 将保存该值，但不会根据用户输入进行更新

我想让 InputNumber 和 DatePicker 在行处于编辑状态时保持初始值，反映用户输入并在用户点击保存时更新行列表。

我已经多次调整代码但无法使其工作

这是代码沙箱

我一直在玩弄这个有一段时间无济于事。

当用户在文本字段中手动输入日期时，该 onChange 事件将触发，并且一切都按我的意愿进行。当用户从 datepicker 中单击一个日期时，什么也没有发生。

我仍然习惯于在控制器中使用 MUI 字段来适应 React Hook Form，但我不确定我做错了什么。

我正在构建一个带有动态字段的受控表单。Parent 组件从 redux 存储中获取数据，然后使用这些值设置状态。我不想用太多的代码行，所以我把动态字段变成了一个组件。状态保留在父组件中，我使用 props 来传递 handlechange 函数。

家长：

孩子 ：

当我输入父输入时，一切都很好。但是，当我对一个字符使用子字段状态更新但之后立即恢复到之前的状态时。它也不显示字符更改。我只能在控制台中看到它。提前感谢您的帮助

在我的问题被标记为重复之前，我想澄清一下我知道如何在 vanilla/regular React 中编写受控输入。

我现在遇到的问题是，我希望能够使用 React-Admin 的TextInput. 使用打字稿提示，我看到value并被onChange接受为属性，但它们不控制输入。

例如

在此示例中，我可以在 TextInput 中键入字符，但它们不会被强制为小写。我可以 console.log() 每次输入时都会显示这些值。此外，切换到香草<input />允许对其进行控制，即值是小写的。

我应该能够以这种方式控制输入，还是有其他一些（迂回的方法）可以做一些相当标准的事情？

我有一个受控输入组件，对传递给本地和 redux 状态的值进行了一些操作。目前，在onchange事件中，我调用了一个“清理”值的函数，然后将其发送到本地状态并将其发送到redux 状态，如以下代码所示。

我在这里担心的是：

onChangeInputField 触发器：

• updateInputValue 更新状态值。
• props.onChange更新 redux 存储值

因为更新了一些东西，现在我们调用 componentDidUpdate ：

• 检查收到的道具是否匹配，因为我们使用 props.onChange 更新了存储中的值，我们正在接收新的道具值
• 因为 updateInputValue 再次被触发 - 它再次更新状态。

我在这里看到的问题是首先我们有多个事实来源其次我多次重新渲染元素。

什么是正确的流程？

在下面的示例中，我想在单击提交后将输入字段重置为空字符串：https ://codesandbox.io/s/todo-app-object-vk99c

表单.js：

应用程序.js：

我的问题是：

1. 我想将name字符串更新为空字符串，如果它不是输入字段的一部分，它似乎可以工作。为什么会这样？在我点击提交之前：https ://imgur.com/hONqktR ，在我点击提交之后：https ://imgur.com/HwL6FZT （注意按钮旁边的文本如何submit重置为空字符串，那么为什么 React 更新一个地方的状态，而不是另一个？）

2. 我收到以下警告：

我认为这是相当模糊的。我知道表单（这是 React 中的受控输入）是问题所在，但不明白警告告诉我什么，以及如何解决它。

更新： 我相信这段代码与它有关：

当我更改{}为 时""，它起作用了，并且警告消失了，但是，我仍然不明白为什么它会在一个地方起作用而在另一个地方不起作用，以及警告在说什么。

编辑： 我得到了这个答案React - changed an uncontrolled input 的建议，但这不是我的情况，因为我的初始状态不是 Form.js 中的空对象

首先考虑我是相当新的反应。

我正在构建一个带有字段的表单是一个输入。在输入中输入文本时，我收到一条消息说

警告：组件正在更改要控制的非受控输入

我查看了文档，但我无法理解它为什么会这样。有人可以帮我理解吗？

这是输入字段

这是处理它的功能

非常感谢您帮助我理解