问题标签 [react-forms]

我正在尝试创建一个多步骤的 React 定价表单。我已经创建了表单和定价部分。

但是用户可以通过按下一步来避免问题并查看下一部分。因此，我需要某种验证，以防止用户通过完成上一步进入下一步。似乎不知道如何创建一个。

• 第 1 步：单选按钮检查（不需要验证）

• 第 2 步：填写国家、城市、邮政编码（需要验证）

• 第 3 步：填写电子邮件（需要验证）

我创建了一个工作代码沙箱。这是链接。

我有一个antd 表单，我可以onFinish function在点击提交按钮时获取表单数据，我想在其中使用uesEffect hook表单数据作为有效负载的动作并将其发送到 redux saga，但出现以下错误

如果我在函数外部编写 useEffect 钩子onFinsh，我将无法获取表单数据/值

请建议一种解决方法以在 onFinish 函数之外获取表单数据值

我在使用 React-Final-Form 库时遇到问题。从onSubmit函数中，我返回了一个验证错误，但它没有显示在表单本身上。在这里你可以看到我的代码：

我的表格：

我的 onSubmit 函数：

问题出在 axios 请求中。如果我的后端服务器发送凭据无效的响应，console.log("Invalid data")则会出现在控制台中，但表单不会发生任何事情。如果我评论我的 axios 请求并留下以下代码：

因此，在这种情况下，一切正常。谁能告诉我如何优化我的 axios 请求，以便之后我的表单将收到从返回的提交错误

下面的代码取自 reactjs.org，我的问题是如何处理下面代码中的空值。只有当用户有一些输入时才应该触发警报，如果输入为空则不应该触发

我面临一个问题，即当我提交表单时，无论是否成功，整个表单字段都会重置。所以我假设这是因为组件正在重新渲染。

我想在提交表单时，无论网络请求是否成功，我希望它仍然保持字段内容

下面是整个代码的样子：

我在 React 方面表现一般，但我必须构建一个使用 JSON 呈现表单的程序。JSON 是这样的：

现在我想使用递归和切换来实现这一点，而不是使用 if-else，我想要一个可以注入其他组件并可以使用递归渲染具有嵌套元素（子元素）的结构的组件。

这是我的想法，但它不起作用....

我想将选定的项目保存到文件中。为什么这段代码不起作用？这里有保存数据的功能：

这里有复选框：

但是当我运行此代码时，出现以下错误：TypeError：将循环结构转换为 JSON --> 从带有构造函数“HT​​MLButtonElement”的对象开始 | 属性 '__reactFiber$l9vrne8ayg' -> 带有构造函数 'FiberNode' 的对象 --- 属性 'stateNode' 关闭了圆圈

输入值似乎没有遵循状态

我将输入值保持在一个状态，但 setState 似乎没有更新该值，这使得输入对击键不敏感

我编写了一个具有确切问题的简化表格

这是代码：

}

当我在 handleInputChange 处理程序中评论验证部分时，输入开始正常运行，但我注意到状态从不包括最后一个字符

我究竟做错了什么？

拉斐尔

///////////////////////////////////////// ///////////////// 个人表格 /////////////////////// //////////////////////////////////

这是值，并且句柄更改功能已通过。这是代码

所以，请帮助我，我应该如何将handleChange函数中携带的输入值与验证进行比较，并在Textfield的helperText中显示错误？

我是 ReactJS 的新手，我正在开发一个简单的应用程序来显示用户输入数据的 2 个屏幕（单个应用程序，无路由），然后一个屏幕显示所有数据，您可以单击一个虚拟提交按钮，上面写着“成功”。我正在使用上下文和 2 个状态。一个用于跟踪我的位置，另一个用于更新用户信息。

第一页效果很好，但是当我单击继续时，我希望我的步骤变为 2 并呈现下一个屏幕，没有任何反应，我得到一个空白屏幕。我的步骤永远不会更新，并且在控制台中我看到一个错误“未捕获的异常：渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。”

我拥有的代码如下： 上下文：

应用程序：

用户窗体：

表单用户详细信息：

当我单击 FormUserDetails 中的继续按钮时，该步骤应更改为 2，并且 UserForm 应呈现案例 2，即下一个表单。或者至少它应该发生但它没有:)

有帮手吗？