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

Question

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

• 通过 defaultValue 使用不受控制的输入:当默认值的数据从初始 Ajax 调用返回时，组件不会重新渲染(官方文档 here 中有详细介绍)。所以输入字段始终为空。
• 使用受控输入并将值绑定(bind)到组件的 Prop :这确实正确给出了默认值，但是由于我无法更改 Prop ，因此该字段基本上被“锁定”。我可以通过触发一个操作来修改 onChange 处理程序中的全局状态并强制整个组件重新渲染来解决这个问题，但这又会带来其他问题。一方面，在 onChange 中这样做似乎有些过分，而且我也不想在用户单击提交链接之前 promise 更改状态。

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

Answer 1

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

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

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