在 React JS 状态下更新输入字段值答案

【问题标题】：update input field value in react JS state在 React JS 状态下更新输入字段值
【发布时间】：2021-11-02 10:12:02
【问题描述】：

这是我在这里的第一个问题，请原谅我的任何错误。所以，我有一些输入，为了显示它们的值，我使用了一些元素，如 h1 和 div，它们位于一个单独的组件中。我希望我的元素具有一些默认值，因此我将它们保持在状态，然后我在输入上调用 onChange 函数，这将更新我的元素状态。我尝试使用 event.target 来执行此操作，例如 nameElement:event.target.value，如果我有一个输入，它会起作用，但是因为我有多个输入，当我更改一个输入字段时，它会被我接下来更改的那个覆盖。那么如何仅更新我更改的输入字段。就像我在名称输入字段中写一些东西一样，只有持有名称字段的 CV 元素应该改变。这是我的代码沙箱链接https://codesandbox.io/s/cool-glitter-9w2mh?file=/src/App.js

【问题讨论】：

非常感谢您发送代码沙箱链接。你熟悉函数式组件吗？
Check this question。甚至查看 react 的有关表单的官方文档 :)
我看到一切正常
@Viet 我的问题不够清楚吗？我得到了我想要的。
是的，我读过那部分。这对我想要的东西没有帮助。那里有关于如何以 [name]:[value] 之类的方式获取输入值的文档。但我想通过 [name] 在不同的状态字段中显示该 [value]。

标签： javascript reactjs forms components

【解决方案1】：

我不确定，我的问题是正确的。但是我进入了沙盒，下面是我的观察结果。

如果您正在处理用户输入表单，我建议您使用 Formik。链接-https://formik.org/docs/tutorial
由于您创建了一个包含默认值和用户输入值的单一状态，因此在单击重新渲染整个组件的“viewCV”链接后，用户所做的任何更改都不会保存。

需要更改

有两种状态：initialData 和 userDetails。
修改handleChange

handleChange = (输入, e) => { this.setState((prevState) => { 返回 { ...上一页状态， [输入]：e.target.value }; }); };
在 workExp 等组件中，教育确保您将 handleChange 链接为“onChange”事件的箭头函数。

handleChange("job", e)}>电子邮件
修改提交按钮以使用用户输入的值呈现简历模板。
修改导致整个父组件重新渲染的 viewCV 链接。

【讨论】：

我正要开始照你说的做。但是我刚刚检查了我的代码沙箱，它没有我在发布问题之前所做的最新更改。我知道出了什么问题，当我发布问题时，我多次访问该链接，甚至在那之后，当时它正在显示我的更改，现在不是。您能告诉我您是否看到填写的表单字段？
使用两种状态并修改提交和查看CV 按钮后，我看到了用户所做的更改。状态、更改处理程序、提交和查看CV 按钮有问题。
首先，非常感谢您提醒我。我对这个问题如此着迷，以至于我什至没有注意到这个主要问题。我现在检查了所有内容，发现更改处理程序和提交 btn 工作正常。只有当我单击作为 a 标签的查看 cv 时，它才会失去价值。我到处搜索，但似乎以前没有人遇到过这个问题。单击该链接后，我不知道如何保留这些值。您对此有任何想法，我如何在查看简历点击时访问主页而不丢失我的价值观？
viewCV 链接导致父组件重新渲染，因此您将丢失所有状态，因为它将被设置为默认值。您可能必须提出不同的 FE 设计才能查看新创建的 CV。一种方法是 - 让主页包含创建的简历列表并创建简历按钮。此按钮应打开一个向用户询问详细信息的模式。单击提交按钮后，新输入的详细信息将附加到现有的简历状态。通过这种方法，您将不会通过更改 URL 来导航到主页。因此状态不会被重置。只是一个建议
是的，就在几分钟前，终于明白我的问题的原因了！为了解决这个问题，我在我的 switch 语句中添加了一个返回 CV 的情况，所以在提交后我不会重复导致重新渲染的步骤。这解决了我的问题。谢谢大佬！