在React / Redux中使用默认值输入文本

Question

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

• 使用带有defaultValue的非受控输入：当默认值的数据从初始Ajax调用返回时，组件不会重新呈现（详见官方文档here）。所以输入字段一直是空白的。
• 使用带有绑定到组件道具的值的受控输入：这确实正确地给出了默认值，但是由于我无法更改道具，因此该字段基本上是“锁定”的。我可以通过触发一个动作来修改 onChange 处理程序中的全局状态并强制整个组件重新渲染，但这又会引发其他问题。例如，在 onChange 中执行此操作似乎过多，而且我也不想在用户单击提交链接之前更改状态。

我可以在这做什么建议？

Answer 1

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

我不认为第二种方式 - 使用value并使用onChange进行更新 - 与您说的一样糟糕;一般来说我是如何写我的表格的。然而，这里真正的问题是再次延迟加载。加载初始值时，用户可能已经填写了该输入，只是看到它被接收到的AJAX值覆盖。不好玩。

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

Answer 2

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

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

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

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

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