问题标签 [react-forms]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1322 浏览

react-native - 在反应本机应用程序上使用反应钩子形式

我正在尝试创建接收道具的可重用控制器组件,而不是一次又一次'name'地复制粘贴具有不同道具的相同控制器标签。'name'

而不是这样写:

我的屏幕.tsx

我想要这样的东西:

我的屏幕.tsx

并像这样导出MyControllerComponet

此示例不起作用 - 输入/数据不会从 Controller 组件传递到MyScreen屏幕(从子组件到父组件)。任何想法我怎样才能让它工作?

额外截图:

主屏幕

我的控制器组件

最后结果

如您所见,单击 onSubmit 时只有 1,2 个值(MainScreen 中的第一个和第二个控制器)记录到控制台,但第 3 个值没有。

感谢您的帮助

0 投票
1 回答
45 浏览

reactjs - 我需要做什么才能在 api 中接收我的表单数据?

您好我在保存采购订单时遇到问题我无法接收表单数据我的代码如下:

现在这是我的结帐API:

我的常量没有接收表单数据,只是为了明确我正确接收的用户和产品数据。最大的问题是 paymentData 常量没有接收到handleCheckout函数中来自表单的内容

最后是我的订单模型,

0 投票
0 回答
360 浏览

javascript - 我想禁用今天之前的日期并在 React 中使用输入 html“datepicker”,我怎样才能做到这一点?

我想禁用今天之前的日期并在 React 中使用输入 html“datepicker”,我怎样才能做到这一点?

这就是我想要实现的

0 投票
1 回答
179 浏览

reactjs - React - 如何调用 web api 来检查用户名是否有效?

我有一个登录页面(下面的代码),它要求输入用户名登录,我尝试添加检查以确保长度为 7(我的数据库中任何用户的长度),并且只输入数字而不是字母。但是我现在想调用我的 web api 来检查输入的用户名是否有效,但我不知道该怎么做,有人可以帮忙吗?

在我的 API 中,我有一个获取所有用户名方法和一个获取用户/方法

在此处输入图像描述

0 投票
1 回答
1837 浏览

reactjs - 使用 react-hook-form 时无法测试 onSubmit

在编写单元测试用例以检查提交函数是否被调用时,我遇到了一个问题。我面临的问题与以下问题类似: https ://spectrum.chat/react-hook-form/help/solved-testing-the-onsubmit~364b8d79-c2f2-4d1c-a3ae-d56fed134128

但是,我使用的代码结构略有不同,因为我没有直接返回“表单组件”,而是返回包装在“FormContext”中的“表单组件”。

失败的测试如下:

我得到的错误如下:

0 投票
0 回答
56 浏览

reactjs - React JS 是的,react-bootstrap 库在本地 PC 中不起作用

我正在使用yup验证进行react-form-hook 。所有依赖项都安装好并在 package.json 文件中更新,但验证不起作用。

所有这些yup验证都很好地在 codeandbox.io 中使用相同的代码。而且我添加了一个带有react-bootstrap的导航栏,但这也不起作用。

以下是安装的依赖项:

下面是导入部分

我完全没有错误。

0 投票
4 回答
192 浏览

reactjs - 在 ReactJS 中管理大量表单输入字段的专业方法是什么?

我的 React App 在表单标签上有 20 多个字段。我的工作代码如下

如您所见,我的代码具有重复声明输入字段状态变量的代码,例如const [formData5, setFormData5] = useState(5); 在渲染函数中,onChange={(e) => setFormData1(e.target.value)}重复了很多时间。

有什么方法可以通过使用 json 对象和其他方法变得简单并看起来很专业?

0 投票
1 回答
24 浏览

reactjs - 我在基于类的 reactjs 代码中有下面的照片上传器代码,我希望它在基于功能的工作代码中

我是新来的反应。我在基于类的 reactjs 代码及其工作中有下面的照片上传器代码,但我希望它在基于反应功能的工作代码中。如果对同一个项目有任何其他建议以使用更正确和更清晰的代码,那么我将不胜感激。

代码如下:

我想要基于工作功能反应的组件代码。我希望将照片上传器集成到我的项目中。

0 投票
2 回答
42 浏览

javascript - 使用 React 钩子处理输入时遇到问题

我尝试用钩子处理用户的文本输入。

});

我尝试通过以下方式更新值

和事件:

示例输入字段代码:

但是每当我在输入字段中输入内容时。我找不到我在输入字段中输入的值。我不明白这里发生了什么。请帮助我摆脱困境

0 投票
4 回答
1195 浏览

javascript - 我如何将输入集中在反应表单中以进行表单验证

所以我专门为这个问题编写了这个反应小的反应形式,我想给它添加一个特性。

这是代码:

您会看到如果您没有填写其中一个输入,它将触发警报。但我想用焦点替换警报。因此,当我忘记填写某个输入时,它会专注于那个空输入,基本上是告诉我填写它。

先感谢您