问题标签 [react-bootstrap-form]

我创建了一个多步骤表单，以便能够创建一个流畅且轻松的入职流程。

我无法正确显示按钮和输入/标签

我正在寻找标签和输入左对齐，并且上一个和下一个按钮显示在同一行，但左侧和右侧一个。我也到达了最新的表格，不再显示“下一步”按钮，我显示了一个提交。

代码有效，只是显示安排不好。

这是它的样子：

我更在寻找这样的东西：

只有 back 和 Next 在此图像上没有正确显示，它应该更接近输入。

否则，这正是我正在寻找的标签然后输入（总是在标签下方），然后是输入和标签下方的按钮。

这是代码：

主表格：

下面的Css是用在master和child上的

这是子表格：

第一个：

第二个：

和最新的，当提交出现时

任何想法如何使它像我发布的最新图片一样好

=====

我正在寻找这样的东西：

我有一个表格，我希望人们在其中放置他们的电子邮件和消息。我将表单元素的 onSubmit 参数设置为我自己的函数，但是，看起来表单仍在使用默认的 onSubmit 函数，因为每当我单击提交按钮时页面总是刷新，并且不会打印出我说的话在我的 onSubmit 函数中打印。仔细观察表单的事件函数，我可以看到有一个onSubmit函数是我想要做的，还有一个submit函数正在刷新页面。出于某种原因，它永远不会运行我的功能（我从来没有看到我正在记录到控制台的内容）！这是我的代码：

表格内容：

电子邮件功能：

我看到了一种解决方法，它说在这样的 div 中包围表单：

但这也没有用。关于出了什么问题的任何想法？

我正在尝试创建一个引导控制的表单。我正在使用react-bootstrap <Form>组件。我只是将react bootstrap网站上的代码复制并粘贴到我的代码编辑器中。我得到了意想不到的结果。

React Bootstrap 表单链接

我的代码：

结果：

您可以看到按钮在左侧是如何呈现的。复选框和静音文本也在左侧呈现。有一个边框-radious已应用，这是意料之外的。


注意：我没有使用任何外部样式。我正在渲染这个单个组件。

我使用 react-bootstrap <Form.Control type="date"> 并且日历图标或日期选择器自动设置到表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它立即跟随日期。我试图找到合适的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

那么有谁知道我应该在哪里改变 CSS 或者有更好的解决方法吗？

这是表单现在的样子：

这一定是一个关于 React 钩子的老问题，但我就是不明白为什么，我用只有基本知识的钩子来改变我的代码。下面的示例格式是带有条件语句的单独状态值，适用于我的输入表单，但是：

当我尝试像下面的示例那样将其置于单一状态时，它不起作用并直接转到错误消息：

使用输入字段，它适用于单独的状态值，但不适用于多状态值，并且字段不可点击：

这是学生详细信息的动态表单，可以使用“ + ”和“ X ”按钮添加或删除新的学生字段。（即，学生字段的数量由用户决定）。在这里，App => 父组件 & StudentsFormElement => 子组件。

问题：点击任何“ X ”按钮时，只会删除最后一个学生字段（在 DOM 中），而不是应该删除的那个。但最重要的是，父组件状态正确更改，并从中删除了正确的学生详细信息。此状态更改未反映在 DOM 中。

代码沙盒： https ://codesandbox.io/s/peaceful-spence-1j3nv?fontsize=14&hidenavigation=1&theme=dark

应用组件：

StudentFormElement 组件：

我尝试过的事情：我在处理onStudentsChange()中的“X”按钮后尝试了 this.forceUpdate()，但它没有任何区别。

再次，codesandbox： https ://codesandbox.io/s/peaceful-spence-1j3nv?fontsize=14&hidenavigation=1&theme=dark

提交表单后如何强制“选择”返回“选择...”？

我想我必须使用模糊或聚焦方法。有什么想法？

我在 react-boostrap 表单上构建了 formik 表单。我有一个自定义的 onchange 来处理输入。问题是即使表单字段中有值也会引发验证错误。此外，如果键入了某些值，则错误消息不会消失。我想验证根本不起作用。请帮助我。

这是 react-bootstrap 表单的代码https://react-bootstrap.github.io/components/forms/#forms-validation-libraries

我想在表单顶部显示的 div 中有一条警告消息。问题是由于消息很长，它扩展了表单的原始宽度。有没有办法防止它增加父表单的宽度，而是让文本换行？

我有这样的密码字段。我想在密码字段的末尾放一个眼睛图标来显示/隐藏密码。

我在 React 引导程序中找不到这个。通过以下方式，可以通过在末尾添加一个按钮来解决问题。

有什么办法可以通过添加眼睛图标来修复它？