问题标签 [controlled-component]

我正在构建一个 ReactJS 搜索组件，用于通过搜索过滤数据。

这个想法是用户输入一个单词，一个字母一个字母，系统将过滤所有包含该单词的寄存器。基本组件详述如下：

handleKeyUp我没有在事件处理程序上获得按键值。

如果我value={this.state.searchText}从代码中省略（不受控制的）它会起作用，但我需要一种searchText从组件外部设置的方法（初始化、其他组件选择等）。

为什么我没有event.target.value在我的处理程序上获取数据？如何解决？

TL;博士

有什么方法可以像使用有状态组件一样使用一个事件处理函数动态更新输入字段的值。

我正在处理一个包含 2 个字段的登录表单。电子邮件和密码。当我使用代表两个字段的 2 useState 时，当我使用 handleChange 更新状态时，两个状态都会更新。这不是本意。

我不想使用多个事件处理程序来处理每个输入字段。我试过这个

但这一次更新一个属性。并且其他财产价值丢失。那么有什么方法可以像使用有状态组件一样使用一个事件处理函数更新我的所有输入字段。

我是 ReactiveSearch 库的新手，我使用自动建议实现了 DataSearch 组件作为我的站内 SearchBar。我添加了valueandonChange以将输入值存储为状态，但是一旦添加了value道具，我就无法再在搜索栏中输入内容了。怎么了？

我也想知道当我点击其中一个建议触发某个事件时，我可以使用什么样的回调函数，我试过了onClick，但没有奏效。这是我的代码，任何帮助表示赞赏！

编辑：这个问题被一些用户标记为重复。不确定他们是否在这样做之前阅读过它。如果有人这样做，请澄清在何种意义上这是重复的。

我有一个复选框组件：

该组件在值更改时返回错误。

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

但如果我更换：

和

像这样：

它不返回任何错误。为什么？

我有一个页面，我从服务器获取数据并设置受控输入的状态值。（例如this.state.name，我的输入值为

所以这就是状态

这就是我使用的方式ingredients

但这会导致此错误：

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

为什么会这样？我该如何解决？

PS：我检查并成功从服务器获取成分

更新：onChange 事件的代码

我正在尝试console.log我选择的下拉项的值。我试过e.target.value和data.value. e.target.value什么都不返回并data.value返回undefined。

我试图捕捉用户停止输入受控输入的那一刻。它在不受控制的组件内部发生得如此顺利。

当我尝试使用时setTimeout，只有最后一个字符作为输入，其余的都没有输入。我不确定为什么会这样

当用户停止输入时，它应该调度changeInput动作

我被这件事难住了。

我有一个受控输入（我使用的是 Material-UI TextField 和自动完成）。

我很高兴组件能够控制自己的值，但我希望能够清除输入。

我该怎么做？

（代码沙箱）

我不想自己实现这个状态的原因是因为自动完成+文本字段非常复杂，我认为必须有一个更简单的解决方案。

例如，有没有办法可以模仿键盘事件来清除文本字段？

我最近偶然发现了这篇非常有趣的文章，它可能会改变我将来在 ReactJS 中提交 Web 表单的方式：

https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f

你们怎么看这件事？这可能是比大多数人可能正在做的更好的方法，即使用受控组件吗？

在这里，他只是使用了一个名为 FormData 的接口，该接口接收表单元素本身并吐出表单中所有输入元素的 JSON 解释。所以这听起来像更少的代码和为你工作。因此，如果您不打算将表单中的输入控件用于将其发送到后端之外的其他用途，那么您为什么要使用受控组件？？？

这是场景：我有一个从 60 计数到 0 的计时器，当它完成时（它为 0），用户可以选择一个按钮（位于父组件中）来重新启动计数器。现在 Timer 有一个 onFinish 属性，它在定时器完成后执行，我在其中增加 key 属性以重新创建 Timer 组件。像这样：

另一种方法是使 Timer 组件受控并具有 onChange 道具。考虑到我只需要知道计时器何时完成并且不需要每秒的确切值，我使用了第一种方法，但这似乎有点像一个不好的做法，因为我很少看到这种方法。

你怎么看？