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

IT技术 reactjs textinput redux
2021-05-12 20:47:37

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

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

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

2个回答

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

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

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

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

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

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

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

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

其它你可能感兴趣的问题
上一篇如何使用typescript模拟或断言 window.alert 是否已在 React & Jest 中触发？ 下一篇React.PropTypes.func.isRequired 的问题