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

Text input with default value in React/ Redux

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

使用带默认值的不受控制的输入：当默认值的数据从初始 Ajax 调用返回时，组件不会重新渲染（官方有详细说明文档 here)。所以输入框一直是空白的。
Using controlled input with value bound to component's props: 这确实给出了正确的默认值，但是由于我无法更改道具，该字段基本上是 "locked".我可以通过触发一个操作来修改 onChange 处理程序中的全局状态并强制重新渲染整个组件来解决这个问题，但这又会带来其他问题。一方面，在 onChange 中这样做似乎有些过分，而且我不想承诺在用户单击提交之前更改状态 link。

有什么建议可以在这里做什么吗？

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

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

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

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

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

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