React/Redux 中具有默认值的文本输入 [英] Text input with default value in React/ Redux

问题描述

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

In my React/ Redux app, I have a text input with its default value retrieved via Ajax call. User can edit the default value in the input, and then submit the updated value by clicking on a 'submit' link. I'm struggling with using either uncontrolled or controlled inputs for this.

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

• Using uncontrolled input with defaultValue: the component doesn't get re-rendered when the data for default value comes back from initial Ajax call (detailed in official document here). So the input field is blank all the time.
• Using controlled input with value bound to component's props: This does give the default value correctly, however since I can't change the props, the field is basically "locked". I can get around this by triggering an action to modify the global state in onChange handler and force the whole component re-rendering, but this again poses other issues. For one it seems excessive to do so in onChange, and also I don't want to commit to changing the state before user clicking the submit link.

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

Any suggestions what I can do here?

推荐答案

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

As the docs say, the defaultValue is only useful at the initial render. So if you want to use defaultValue you have to delay the rendering of that particular component until after the data is loaded. Consider putting a loading gif (or something similar) in place of the form for the AJAX call.

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

I don't think the second way - using value and updating with onChange - is as bad as you say; it's generally how I write my forms. However, the real problem here is once again the delayed loading. By the time the initial value loads in, a user may already have filled in that input, only to see it overwritten with the received AJAX value. Not fun.

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

The best way in my view is simply to not use AJAX. Append your initial data to the webpage itself as a global variable. This may sound like an anti-pattern but you only ever read the global once, and it saves you cost of an AJAX request. In Redux there's a convenient way of doing this which I've documented here and here.

这篇关于React/Redux 中具有默认值的文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！