需要切换时，React-Final-Form验证范围
React-Final-Form是一个基于React的表单验证库，它提供了一种简单且灵活的方式来处理表单验证和数据处理。它的主要特点包括：
- 验证范围：React-Final-Form允许您在表单级别和字段级别进行验证。表单级别验证可以用于检查整个表单的一致性，例如检查两个密码字段是否匹配。字段级别验证可以用于验证单个字段的输入，例如检查电子邮件地址是否符合格式要求。
React-Final-Form提供了一组内置的验证器函数，例如必填字段、最小/最大长度、正则表达式匹配等。您还可以自定义验证器函数来满足特定的验证需求。
优势：
- 灵活性：React-Final-Form提供了灵活的验证范围，使您能够根据具体需求进行表单和字段级别的验证。
- 易于使用：React-Final-Form的API设计简单直观，易于上手和使用。
- 高性能：React-Final-Form通过使用React的虚拟DOM和优化的更新策略来提供高性能的表单验证和数据处理。
应用场景：
- 表单验证：React-Final-Form适用于任何需要表单验证的场景，无论是简单的登录表单还是复杂的多步骤表单。
- 数据处理：React-Final-Form还提供了方便的数据处理功能，例如表单提交、重置等。
推荐的腾讯云相关产品：
- 腾讯云函数计算（SCF）：用于处理表单提交等后端逻辑。
- 腾讯云数据库（TencentDB）：用于存储表单数据。
- 腾讯云CDN（Content Delivery Network）：用于加速表单页面的加载速度。
产品介绍链接地址：
- 腾讯云函数计算：https://cloud.tencent.com/product/scf
- 腾讯云数据库：https://cloud.tencent.com/product/tencentdb
- 腾讯云CDN：https://cloud.tencent.com/product/cdn
相关·内容
我有一个表单组件，在其中我为它提供了一个验证函数。当我在FC中定义验证函数时，它可以工作。但是当我在FC之外提取这个函数时，它不会被调用。
这样做是可行的：
import { FC } from 'react';
import { Form } from 'react-final-form';
const MyComponent: FC = () => {
const validate = (values: ValidationValues) => { ... }
return (
<Form
onSubmit={
浏览 1提问于2019-11-28得票数 2
回答已采纳
我想使用来自react-final-form ()的Material UI的TextField。
主要问题是“如何获得values 对象？”
我不能从TextField那里得到它。
结果是：
我已经试过了不同的例子，但都没有用。
我的代码：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@
浏览 2提问于2019-02-21得票数 6
回答已采纳
我有一个简单的使用react-final-form的表单。每次values更改时，此表单都会自动保存。当用户出于某种原因重新加载页面时，表单将从先前保存的值中获取initialValues。它工作得很好，但是meta.pristine和meta的其他属性没有保存。是否可以在formState中恢复react-final-form
浏览 9提问于2019-12-20得票数 1
回答已采纳
是否可以重新导出现有的类型化模块并将其类型用于非类型化模块？ 我正在导入一个库react-final-form-html5-validation，它只是类型化react-final-form的一个小包装器。 对此有什么选择吗？ 我已经尝试了很多方法……但是这看起来很有希望，但是，react-final-form没有声明名称空间，所以我不能像使用下面的React那样使用它的类型。 project/index.d.ts /// <reference types="react-final-form" />
//// <reference types="./
浏览 14提问于2019-02-23得票数 0
我的material-ui单选按钮最初是有效的，但当我使用react-final-form实现时，我可以正常工作。现在的问题是，这个单选按钮根本无法单击，但当我删除...input inside inputProps单选按钮时，它就可以工作了。 我知道有一个material-ul react-final-form包装器https://github.com/Deadly0/final-form-material-ui，但我现在不想使用它。 有什么帮助吗？ import { Box, Typography } from '@material-ui/core'
import { u
浏览 27提问于2021-01-19得票数 0
我试图让react-select的多选组件以字符串数组的形式提交所选值，但结果却是以{label，value}对象数组的形式出现。
我将通过react-final-form的Field组件传递给react-select的对象结构如下：
[
{ val: "first-value", display: "First Value" },
{ val: "second-value", display: "Second Value" },
{val: "third-value", display: "Third
浏览 23提问于2019-08-09得票数 2
回答已采纳
我想连接到react-final-form的更新。这有可能吗？也就是说，我希望能够执行一个任意函数，该函数将更新react-final-form负责的数据。具体地说，我有一个带有update方法的Model类，我希望能够调用instance.update({ [fieldName]: fieldValue })，而不是更新react-final-form使用的普通的ol‘Javascript对象。这个是可能的吗？ 下面是我想做的一个例子： <Form
initialValue={myModel} // instance of Model
render={() => <
浏览 25提问于2019-06-13得票数 0
我正在使用react-final-form发送一些基本的用户数据。名字，姓氏，电子邮件和下拉值，以及他们联系我的原因。我尝试了以下内容(react-final-form文档中的自定义输入部分)：
<Field name="myField">
{props => (
<div>
<Select
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select&
浏览 0提问于2019-09-25得票数 0
我使用react-final-form创建了一个表单。自动对焦不起作用。我所知道的唯一解决方案是使用React的ref特性。我可以使用react-final-form库自动聚焦输入吗？ import React from "react";
import { render } from "react-dom";
import { Form, Field } from "react-final-form";
const App = () => (
<Form
render={({}) => (
<f
浏览 20提问于2019-02-05得票数 5
回答已采纳
我正在使用react-final-form，如果用户尝试提交有错误的表单，我想显示一个警告。但我不知道该怎么做。我为form onSubmit创建了一个函数，如下所示：
onSubmit={event => {
event.preventDefault();
//How to check if the form has any validation errors?
if () {
alert("Errors");
} else {
handleSubmit();
}
}}
如果有任何验证错误，我如何签入它？这是我的。
浏览 22提问于2019-10-27得票数 1
回答已采纳
下面的代码片段应该返回信标列表。当让Google控制台生成一个API密钥时，我已经白化了我的公共IP地址，并与API密钥相关联。当代码调用ExecuteAsync()方法时，我一直收到错误代码403 (禁止)的异常。我可能做错了什么，如何减轻这个问题？
public async void TestApiKey()
{
var apikey = "739479874ABCDEFGH123456"; //it's not the real key I'm using
var beaconServices = new ProximitybeaconSe
浏览 4提问于2016-11-18得票数 0
回答已采纳
1回答
我将react-admin v2.0升级到3.0，我遵循了这个guide。 我对react-final-form和jest测试有问题。 我在一个按钮上做了一个自定义逻辑，我需要表单值，所以我使用来自react-final-form的useFormState。它在应用程序上运行得很好，但在运行jest测试时出现错误。 下面是我的组件中的代码 import { Button } from '@material-ui/core';
import { Save } from '@material-ui/icons';
import { useFormState } f
浏览 37提问于2020-01-02得票数 0
回答已采纳
1回答
我将react-number-format与react-final-form结合使用。我的组件看起来如下：
const CurrencyInput = props => {
return (
<NumberFormat
thousandSeparator=" "
decimalScale="2"
isNumericString={true}
fixedDecimalScale={true}
allowNegative={false}
autoComplete="
浏览 14提问于2019-11-08得票数 1
回答已采纳
2回答
在react中模拟提交最终表单
、、、、
我正在尝试通过提交表单来测试回调函数是否正在被调用。我模拟了一个onSubmit函数，它被传递到react-final-form中。如代码和下面的代码框所示，我得到了一个带有onSubmit回调的简单表单。 export const MyForm = ({ onSubmit }) => (
<Form
onSubmit={onSubmit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit} autoComplete="off">
浏览 49提问于2020-10-22得票数 1
回答已采纳
./node_modules/react-final-form/dist/react-final-form.es.js
找不到模块:无法解析'/app/node_modules/react-final-form/dist‘中的'final-form’
浏览 1提问于2020-09-28得票数 3
请帮助理解react-final-form的api文档，
我们已经将redux-form迁移到了redux-final-form。在我的应用程序中，我们使用formvalueselector api来获取表单值。请帮助在react-final-form中获得更纤细的api
要求是通过属性名称获取表单值
浏览 28提问于2020-05-06得票数 1
1回答
使用React、react-final-form和lodash去反跳函数，我想验证用户名是否尚未被使用(该字段正在使用react-final-form)。
在获取从fetch请求返回已解析的promise时，我遇到了一些问题。
我提供了以下链接来演示我的问题：
有人能告诉我为什么我的代码不能工作吗？
验证的入口点来自在中的this.isNameUnique属性中引用的验证调用
import React from "react";
import { Field, Form } from "react-final-form";
import { debounce
浏览 69提问于2019-08-15得票数 11
回答已采纳
2回答
我试图用这样的React-Final-Form构建一个简单的表单：
import * as React from "react";
import {
PrimaryButton,
} from "office-ui-fabric-react/lib/Button";
import { Form , Field } from "react-final-form";
import { FORM_ERROR } from "final-form";
import { IUserFormValues } from "../..
浏览 4提问于2020-12-31得票数 1
回答已采纳
1回答
我使用react-final-form，有两个单选字段(Yes/No)。当'Yes‘是当前值，并且用户选择了'No’时，我想显示一个模式，要求用户确认。如果用户取消，该值应保持不变，如果用户确认，则应更新该值。
有没有办法用react-final-form或final-form的当前版本做到这一点？我看了一下文档，注意到beforeSubmit并没有看到任何类似beforeChange的东西
浏览 36提问于2019-07-18得票数 0
回答已采纳
我需要能够处理onFocus事件，这样才能在使用react-final-form时选择文本。我试着在文档中搜索，但找不到任何关于这个主题的资源。有什么想法吗？
浏览 15提问于2019-06-10得票数 0
回答已采纳
1回答
我使用Material-ui和React-final-form。有些表单元素是从浏览器缓存中预先填充的，例如登录表单。问题是这不会触发React- onChange - form中的最终事件，这会使表单字段状态处于“空”状态，这在视觉上是有问题的。一旦触发了渲染周期，React-final-form就会获得更改，ui就会很好。我想知道如何以编程方式触发此操作。
浏览 2提问于2018-08-06得票数 0
我在react-final-form <Field>中使用的自定义React组件具有int?的值支柱。它的值可以是整数，也可以是null。但是，当我使用null组件的initialValues支柱为该字段组件的值设置一个<Form>初始值时，react-final-form将null转换为空字符串''。
我知道，通过创建一个检查''并将其转换为null的包装组件，我可以轻松地解决这个问题，但是还有其他更干净的方法来解决这个问题吗？或者这是图书馆的错误？
import React from "react";
import
浏览 0提问于2018-06-22得票数 3
回答已采纳
我正在从Redux form迁移到react final form。在react-final-form中有没有ReduxForm的FormSection的替代品？
我看到了一个使用点符号的解决方案。但是，我的应用程序可能有很多嵌套的表单部分。因此，无法确定和添加相应的名称。那么在react-final-form中是否有可替换的Formsection实现呢？
我目前正在尝试使用上下文。然而，这需要将“name”属性更改为${val}.${prevName} everywhere。因此，如果可能的话，最好有一个更简单的实现。
浏览 1提问于2019-07-04得票数 2
我正在创建通过数组进行反应的元素。
childArray.push(
<span className={value}>
</span>
)
...
parentArray.push(
<Element>
{({ value }) => (
{childArray}
)}
</Element>
)
我希望子数组能够访问父支柱value。
我使用的是react-final-form和FormSpy，这也是我遇到这个问题的时候。我无法改
浏览 0提问于2019-07-14得票数 0
回答已采纳
我使用的材料-ui-芯片-输入包装与现场反应-最终形式。
我只想把“筹码”限制在5块。
芯片是表示输入、属性或动作的紧凑元素。
正如你所看到的，我在这里使用两个状态
反应useStates
反应-最终形式的内部状态
这是多余的，因为react最终形式在内部处理状态，但我不能工作，我只是在展示我迄今所做的事情。
基本上，我的实现有两个问题。
它不限制我的筹码。
当单击DeleteChip时，“我的反应”--最终表单字段值--没有更新。
import ChipInput from 'material-ui-chip-input'
im
浏览 0提问于2021-02-05得票数 0
回答已采纳
嗨 我尝试创建自定义react函数组件，将其作为组件传递给react-final-form Field，但得到一个错误。 详细信息 表单 import {Form as FinalForm, Field} from 'react-final-form';
import { Form} from 'semantic-ui-react';
<Form onSubmit={handleSubmit}>
<Field placeholder='Venue' value={activity.venue} name={'
浏览 25提问于2020-01-03得票数 1
2回答
我正在寻找一个控件，它的作用与Excel中的用户定义函数控件相同
例如，当你点击"Average“时，弹出一个控件，允许你在文本框中输入2个数字。在文本框的右侧有一个按钮，当单击该按钮时，您可以在excel中选择某个范围的值，而选中该按钮时，将填充文本框。
有没有人知道VSTO或其他控件可以做到这一点，这样我就不必自己编写代码了？
浏览 6提问于2009-05-21得票数 3
我使用react-final-form和material-ui，并将defaultValue从数据库中放入，这有时可能是错误的(它们通过脚本推送到数据库中)。有没有一种方法可以在组件加载时显示错误？ <Field
component={MyComponent}
defaultValue="my value from database"
name="name"
/>
浏览 7提问于2019-12-06得票数 0
回答已采纳
我想在react-final-form中使用带有Ant Design Input的react-input-mask。为了在react-final-form中使用antd，我还必须安装redux-form-antd。所以文件看起来是这样的：
import React from "react";
import ReactDOM from "react-dom";
import { Button } from "antd";
import { Form, Field } from "react-final-form";
import I
浏览 71提问于2019-07-15得票数 0
回答已采纳
我有两张表格。当我在第一个表单上选择一个选项时，第二个表单被添加到页面，其中包含从后端检索到的参数。现在如何将参数名设置为react-final-form字段名？ 我找不到这样做的方法。在哪里传递参数名？ <Form
onSubmit={onSubmit}
validate={validate}
浏览 21提问于2019-06-01得票数 2
回答已采纳
2回答
我在演示中使用react-final-form和semantic-ui，在演示中使用多个选择下拉列表。
我将multiselect下拉列表转换为single select (我喜欢具有芯片结构的设计)。
但是，当我选择任何值时，我的表单数据响应就会像这样传入。当用户选择任何值时，表单响应
{
"dropdown": [
"ax"
]
}
预期响应
{
"dropdown": "ax"
}
这是我的密码
我将mutiselect转换为像这样的单一选择
onChange={(e, data) =
浏览 1提问于2019-08-02得票数 0
回答已采纳
我目前正在使用react-final-form创建一个表单，并试图通过集成作为适配器使用react-phone-number-input，就像通过显示的那样。
我试图使用这个示例来了解它是如何完成的，但我不确定如何访问组件并正确地为其创建适配器。
import React from 'react';
import { Form, Field } from 'react-final-form';
import PhoneInput from 'react-phone-number-input';
const sleep = ms => ne
浏览 0提问于2019-04-15得票数 3
回答已采纳
1回答
const baseHandler: APIGatewayProxyHandlerV2 = async (event) => {
return service.create(event.body);
}
const inputSchema = {
type: "object",
properties: {
body: {
type: "object",
properties: {
year: { type: "number" },
questionId: { ty
浏览 8提问于2022-11-19得票数 0
回答已采纳
当前行为? 当输入为空时，样式将突出显示为灰色(如下所示) ? 以下是我当前的代码 <Field
name="day"
render={({ input }) =>
<Autocomplete
options={this.days}
getOptionLabel={(option) => {
return option.toString()
}}
{...input}
onChange={(e, va
浏览 49提问于2021-10-05得票数 0
回答已采纳
1回答
我正在使用chai来尝试和单元测试我在网上找到的一个验证函数。此验证函数正在“react-final-form”组件中使用。 下面是我从这里得到这个验证器函数的地方： https://youtu.be/OEg8jm-NbQ0?t=567 import chai, { expect } from "chai";
import chaiEnzyme from "chai-enzyme";
chai.use(chaiEnzyme());
const required = (value) => value === '' ? 'This
浏览 12提问于2019-10-06得票数 0
回答已采纳
每当外部组件发生事件时，我都会尝试更改react-final-form字段的值。比方说，我调用了服务器API，它最终改变了状态对象。这个对象是原始表单的initialValues，但是当然表单有它自己的状态管理，所以更改这个外部状态不会影响字段的值。
浏览 30提问于2019-10-17得票数 0
2回答
限制列仅接受特定值
、、、、
我试图在Excel2010中插入一个公式，以便该列只允许用户在以RM或TM开头的情况下输入一个值--如果没有，则抛出一个说"Needs to have either RM or TM in the starting of the value"的错误。
用公式就能做到这一点吗？
此外，如何将此应用于整个专栏？
浏览 2提问于2015-03-24得票数 1
回答已采纳
我正在尝试使用块菌，根据这种方法，松露可以使用它的测试功能来允许您使用solidity语言来测试稳固契约。然而，在网上，许多开发人员使用Mocha和柴。因此，需要JS。
我知道我可以避免在测试中使用JS，而只在松露中使用坚固性。但为什么没人说出这么做的局限性。此外，是否有任何资源可以清楚说明这一点？
为什么在使用进行测试时没有足够的资源？
浏览 5提问于2022-06-01得票数 0
回答已采纳
1回答
在我的示例中，我使用了react-final-form和TextareaAutosize，.I试图获得text-area的值，但无法做到这一点。我能够得到input字段的值，但不能得到textarea字段的值。
这是我的代码
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
nam
浏览 0提问于2019-08-11得票数 1
回答已采纳
我的react-final-form中只有Switch组件。它看起来是这样的： <Form
onSubmit={onSubmit}
initialValues={initialValues}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Field name="booleanValue" component={Switch} onChange={handleSubmit}/> //triggers when receives v
浏览 16提问于2020-01-22得票数 0
回答已采纳
1回答
我对React Final Form有一个问题。我尝试遵循官方文档中的示例，但是我仍然不明白为什么我的表单不想调用onSubmit作为示例，我仍然在尝试理解handlesubmit的作用是什么。
我认为问题在于我的字段是从另一个使用useField钩子的组件调用的。
import React, { FC } from 'react'
import { Form, Field } from 'react-final-form'
import {
Grid,
Box,
Button,
createStyles,
makeStyles,
T
浏览 0提问于2019-12-30得票数 1
我有一个表单，它可以用数据做两件事。我记得在redux-form中可以像这样向handleSubmit提供一个函数：handleSubmit(customOnSubmit)。react-final-form中的替代方案是什么？
浏览 0提问于2018-06-06得票数 0
我得到了产生/api/登录的api，但我不知道如何在其他端点中使用它，因为在Docs中它谈到了如何使用OAuth2进行请求。
浏览 18提问于2022-04-24得票数 0
回答已采纳
我正在尝试创建一个具有另一个DTO作为数组的DTO，但是在发送body时，nestjs/swagger没有检测到body内容。我的DTO是：
export class CreatePageDto {
@ApiHideProperty()
createAt: Date;
@ApiHideProperty()
updateAt: Date;
@ApiProperty({
type: CreatePageTranslateDto,
isArray: true,
})
translations: CreatePageTranslateDto[];
}
浏览 37提问于2022-10-29得票数 0
我构建了一个可以跨多个选项卡呈现的react-final-form。我有一个跟踪活动选项卡索引并显示适当TabPanel的Tabs组件。
const App = () => (
<Styles>
<Form
onSubmit={_ => _}
mutators={{
...arrayMutators
}}
>
{({ handleSubmit, submitting, values, form: { mutators } }) => {
const ta
浏览 2提问于2020-04-07得票数 2
我有一个react-final-form表单，它需要从状态初始化。当其中一个字段发生变化时，我希望将表单重置为初始(空)值。因此，我使用字段的订阅状态，如果它发生变化，我使用OnChange重置表单：
<Field name="option" subscription={{ dirty: true }}>
{({ input: { onChange } }) => (
<OnChange name="option">
{value => {
form.reset({
浏览 8提问于2019-11-14得票数 0
回答已采纳
我正在创建React最终表单字段组件的包装版本，本质上是创建可共享的字段类型，以加快公司的开发速度。作为其中的一部分，我希望创建一组复选框，要求至少选中一个复选框--但当我试图编写验证函数时，我似乎只能访问当前字段。
基于其他一些答案和API文档，我认为验证函数接收了三个参数-- validateMyField(value，allValues，fieldState)。
当我将函数传递给给定的字段时，我得到以下内容：
const mustPickAtLeastOne = (value, allValues, fieldState) => {
console.log(valu
浏览 1提问于2019-07-23得票数 2
似乎我不能掌握React-final-form是如何工作的。 在顶部有一个包含以下部分的功能组件： import {Form, Field} from "react-final-form"; 然后在返回中： return (
<Fragment>
<Form
onSubmit={handleSubmit}
render={ ({innerSubmit, form, submitting, pristine, values}) => (
<for
浏览 15提问于2019-03-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
