问题标签 [react-forms]

我是 react 和 redux 世界的新手，非常感谢任何帮助。我有一个用于添加一些数据的表单。在该表单上，如果用户在提交表单之前没有在字段上输入任何值，我正在尝试验证字段。但是验证不起作用，并且正在提交空值。当我调试时，验证方法永远不会被调用。下面是我的表单：

添加产品.JS

index.js

我正在 React 中创建一个类似向导的表单。我希望它仅在用户在上一个下拉列表中选择一个选项时才显示另一个选择。目前我的选择有效，但我在这里使用了很多 useState 钩子。由于最终我希望有大约 10 个选择，我认为多达 10 个 useStates 可能不是最佳选择。您能否查看我的代码并给我一些提示以使其变得更好/解释为什么这样的更改会使它变得更好？

下面我发布我的代码，它在带有 bootstrap 4.2.1 和 react-select 2.2.0 的代码沙箱中工作：

在我学习 React 的过程中，每一个建议都将不胜感激！

我一直在开发一个评论反应应用程序一段时间了，我遇到了一个问题。评论可以有评论回复，但每条评论只能有一个评论回复。我实现了功能，以便一旦评论有回复，回复表单就不会出现。但是，我需要实现一种可以编辑响应的方法。我考虑通过向 ReviewResponse 添加一个“编辑”按钮，并向呈现 ReviewResponseForm 组件的该按钮添加一个“onClick”功能来解决这个问题。但是，此功能不起作用。有人对我应该如何实施这个有任何建议吗？谢谢

ReviewResponseBox 确定应用程序是否应该呈现当前的 ReviewResponse 或 ReviewResponseForm，并传递必要的道具。

现在 ReviewResponseForm 仅在没有现有 ReviewResponse 时呈现。但是使用编辑功能，如果单击我的 ReviewResponse 组件上的编辑按钮，我正在考虑渲染它

ReviewResponse.js

任何建议都会有帮助谢谢

编辑#1 大家好，我将组件更改为在单击按钮时重新呈现，以便状态可以更改并且可以呈现表单，但它仍然没有显示出来。任何建议都会有所帮助，谢谢（我实际上将我的 handleClick 事件处理程序放在省略号图标上）

我在表单中有一个标签部分，我正在从另一个名为的组件渲染标签 div <StackTag/>，我在该组件中有一个标签状态数组。在我的表单 onSubmit 中，我正在创建表单数据的对象。我无法访问标签数组<StackTag>并将标签推送到我的表单对象中。

在我的表单组件中，

在我的控制台中，我可以看到 的状态<StackTag/>，我可以看到带有标签的数组，它正在工作，我尝试了不同的方法但我无法弄清楚，我正在使用 react-hook-form 来获取表单数据常量

如何将标签添加到我的结果对象？

我在这里遗漏了一些非常明显的东西。需要一些帮助来理解使用 Multi Form 的反应路由。我有一个导航差异组件（页面）的多步骤表单。每次单击下一个按钮时，我都使用 history.push 来帮助导航到 diff url，而不是使用 Page 直接呈现组件。这是我的外壳代码。

现在我需要一个菜单​​和表单，以便用户能够直接访问任何页面。并非表格中的所有步骤都是必需的。这是我的菜单https://codesandbox.io/s/silly-brook-ecj7e?file=/src/AppMenuItemComponent.tsx 将页面路由到页面

我如何将这两者同步在一起（上面的例子是我的尝试）？多步骤表单与下一步按钮配合良好，但在单击菜单按钮时不会更新。（可以理解，因为它检查页面 === 编号）。在这一点上，我正在考虑完全删除页面检查，而不是让它成为一个多步骤表单。

我正在使用 react json 模式表单（https://react-jsonschema-form.readthedocs.io/）来创建通过模式呈现的表单。我正在尝试生成一个模式依赖项，其中基于下拉列表的选择生成不同类型的表单字段。

我以这种形式创建了 json 模式：

但是，通过在 json 模式游乐场 ( https://rjsf-team.github.io/react-jsonschema-form/ )中对此进行测试可以看出，它会在彼此下方生成 Select 运算符和相应的值框。有没有办法让所有东西都排成一行？

我研究过使用这个https://github.com/audibene-labs/react-jsonschema-form-layout来布局不同的表单元素，但我无法弄清楚 uiSchema 应该是什么样子。有什么建议么？我使用引导程序作为我的样式库。

这是我的领域：

在我的测试中，到目前为止我已经这样做并且它通过了，但我认为这是错误的，因为对于名称，代码中的“邮政编码”以小写字母开头，但在我的测试中，它只有在名称带有大写字母时才通过P'。我也不知道如何测试标签、nonReduxFormInputProps 和组件。

我已经知道“值”与受控组件一起使用。但是在这个测试中，当我删除该属性时value = {controlledValue}，它仍然可以正常工作。

value当我们已经处理了controlledValue状态时，拥有财产有什么意义handleChange？

我是新手，想知道如何通过应用条件从表单中更新和编辑同一函数 handleSubmit() 中的数组数据

这是我的代码

我希望 addData() 和 editData() 通过应用条件使用相同的方法（如handleSubmit()）这是我的按钮：

我是新来的反应并构建一个页面，该页面从表单中获取详细信息并从输入的数据中将其显示在表格中。如果单击保存而不填写表格，它会显示错误，我认为这是因为如果保存它正在打印空箭头。 如果单击保存而不添加表单详细信息，则会引发错误

这是错误

我想我有这个功能错误

有什么解决方案吗？