React/Redux 中具有默认值的文本输入

Posted 2023-04-18

【中文标题】React/Redux 中具有默认值的文本输入

【英文标题】：Text input with default value in React/ Redux

【发布时间】：2016-04-25 17:23:50

【问题描述】：

在我的 React/Redux 应用程序中，我有一个文本输入，其默认值是通过 Ajax 调用检索的。用户可以在输入中编辑默认值，然后通过单击“提交”链接提交更新的值。我正在努力为此使用不受控制或受控的输入。

将不受控制的输入与 defaultValue 一起使用

：当初始 Ajax 调用返回默认值的数据时，组件不会重新渲染（详见官方文档here）。所以输入字段一直是空白的。

使用绑定到组件道具的值的受控输入

：这确实正确地给出了默认值，但是由于我无法更改道具，因此该字段基本上是“锁定”的。我可以通过触发一个动作来修改 onChange 处理程序中的全局状态并强制整个组件重新渲染来解决这个问题，但这又会带来其他问题。一方面，在 onChange 中这样做似乎太过分了，而且我不想在用户单击提交链接之前承诺更改状态。

有什么建议吗？

【参考方案1】：

正如文档所说，defaultValue 仅在初始渲染时有用。因此，如果您想使用defaultValue，则必须延迟该特定组件的呈现，直到数据加载完成。考虑用加载 gif（或类似的东西）代替 AJAX 调用的表单。

我不认为第二种方式 - 使用 value 并使用 onChange 更新 - 没有你说的那么糟糕；这通常是我写表格的方式。然而，这里真正的问题再次是延迟加载。当初始值加载时，用户可能已经填写了该输入，只是看到它被接收到的 AJAX 值覆盖。不好玩。

在我看来，最好的方法就是不使用 AJAX。将您的初始数据作为全局变量附加到网页本身。这可能听起来像是一种反模式，但您只读取一次全局，它节省了 AJAX 请求的成本。在 Redux 中，有一种方便的方法可以做到这一点，我已经记录了 here 和 here。

【讨论】：

+1。而不是全局变量，在文本框中简单地硬编码默认值有什么问题？如果它是可定制的，则该值可以来自设置对象。

我想我会显示一个加载指示器。不使用 AJAX 的想法很有趣，但是我无法控制生成初始页面的后端代码，所以这很糟糕。有点令人沮丧，没有优雅的方法来处理这个问题，但无论如何感谢您的提示。

【参考方案2】：

只是为了补充大卫的答案。

有时进行 AJAX 调用以加载默认值确实有意义。 例如。你可以调用一些服务来支持多语言，在数据库中创建一个具有默认值的元素，等等。

我会采用 value-onChange 方法并防止用户在加载之前编辑值：

通过禁用输入直到 AJAX 调用返回。只需将 disabled 属性绑定到显示默认已加载的某个道具。

在 AJAX 调用返回之前不呈现输入。当您从服务器获取默认值时，您会修改状态以触发重新渲染。