React Formik :如何使用自定义onChange和onBlur
React Formik是一个用于处理表单的React库。它提供了一种简单且强大的方式来管理表单状态、验证输入以及处理表单提交等功能。
要使用自定义的onChange和onBlur函数，可以通过Formik的Field组件来实现。Field组件是Formik提供的一个高级组件，用于处理表单字段的状态和事件。
首先，需要在React组件中引入Formik和Field组件：
import { Formik, Field } from 'formik';然后，在Formik组件中定义表单的初始值、验证规则和提交函数等属性。例如：
<Formik
initialValues={{ name: '', email: '' }}
validate={values => {
const errors = {};
// 自定义验证规则
if (!values.name) {
errors.name = 'Required';
}
if (!values.email) {
errors.email = 'Required';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>接下来，在表单中使用Field组件来定义表单字段。可以通过name属性指定字段名，component属性指定表单控件的类型，以及其他属性如onChange和onBlur来自定义事件处理函数。例如：
<form onSubmit={handleSubmit}>
<Field
name="name"
type="text"
component="input"
onChange={handleChange}
onBlur={handleBlur}
/>
<Field
name="email"
type="email"
component="input"
onChange={handleChange}
onBlur={handleBlur}
/>
<button type="submit">Submit</button>
</form>在上述代码中，handleChange和handleBlur是自定义的事件处理函数，可以在这里进行一些自定义的逻辑操作。
最后，在Formik组件的结束标签后面添加</Formik>即可完成Formik表单的使用。
React Formik的优势在于它提供了简洁而强大的API来处理表单，可以轻松地进行表单验证、状态管理和事件处理等操作。它还提供了丰富的扩展功能和插件，可以满足各种复杂的表单需求。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）。
相关·内容
7回答
Formik onSubmit函数在我的代码上无效
reactjs、typescript、formik
我正在使用react创建一个表单，formik.Below是我的代码：
<div>
<Formik
initialValues={{
email: ""
}}
onSubmit={(values: FState, setSubmitting: any) => {
console.log("Enter in submit function", values);
setTimeout(() => {
alert(JSON.stringify(values,
浏览 3提问于2019-03-19得票数 60
1回答
理解Formik并作出反应
reactjs、formik
这可能不是发布这个问题的最佳地点，但在哪里呢？
下面的代码摘自，我对onSubmit处理程序感到非常困惑：
form元素具有一个onSubmit属性，该属性引用handleSubmit，该属性在匿名函数<form onSubmit={handleSubmit}>上传递。那是从哪来的？
Formik组件还具有一个onSubmit属性：
onSubmit={(values, { setSubmitting }) => { ... }
它们之间有什么关系？怎么一回事？
import React from 'react';
import { Formik } fro
浏览 2提问于2019-04-08得票数 0
回答已采纳
1回答
无法在表单提交上使用Formik执行反应性状态更新
javascript、reactjs、formik
当我单击按钮提交表单时，会收到以下警告：
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Formik@http://localhost:3000/static/js/vendors
浏览 3提问于2021-03-12得票数 0
回答已采纳
2回答
当Button在Formik组件之外时在提交按钮上使用formik.isValid
javascript、reactjs、twitter-bootstrap、react-bootstrap、formik
我的React应用程序有一个react-bootstrap引导模式，它包含Modal.Body中的Formik表单和Modal.Footer中的submit按钮。
我们如何允许Modal.Footer中按钮的formik.isValid属性接受formik.isValid和formik.dirty值？
disabled={!(formik.isValid && formik.dirty)}
更完整的代码
import React, { useState, useEffect } from 'react';
import { Button, Modal, For
浏览 2提问于2021-02-10得票数 0
1回答
表单选择框不更新表单提交上的字段
javascript、reactjs、axios、formik
我正在使用Formik和React来处理我的web应用程序表单。
当我尝试提交任何包含字段的表单时，如果该字段未包含正确的选定值，则会采用默认值。
在下面的例子中，元素对应于输入" clientId "，当我选择一个客户端，然后提交表单时，Formik总是假设clientId为空字符串(默认值)。
我尝试用文档中的以下代码替换我的动态选择框
<Field name="color" component="select" placeholder="Favorite Color">
<option value=&#
浏览 0提问于2018-10-28得票数 1
2回答
对受控输入使用带钩子的React.memo
javascript、html、reactjs、react-hooks
我从自定义的React钩子中提供了一些表单功能。这个钩子有一些类似于Formik的功能(但这是非常基本的东西)。
function useFormValidation(initialState, validate) {
const [values, setValues] = React.useState(initialState);
const [errors, setErrors] = React.useState({});
const [isSubmitting, setSubmitting] = React.useState(false);
React.useEffec
浏览 1提问于2019-05-27得票数 4
回答已采纳
1回答
Formik表单未从Modal组件提交
javascript、reactjs、formik、chakra-ui
有一些表单字段，在正常的页面上和模态，我希望模态按钮来触发提交事件。每当我使用模式按钮上的submit type="submit“时，我都得不到响应。但是如果我在普通的页面按钮中使用它，它就可以工作。这是怎么回事，我不能在Modal中使用它吗？ <Formik
initialValues={{
productName: "",
productNumber: "",
quantity: 1,
unitCost: 0,
totalCost: 0,
customerNa
浏览 26提问于2020-11-25得票数 2
回答已采纳
1回答
我如何将这个(文件上传)类组件转换为React中的功能组件？
reactjs、class、functional-programming、components
这是在类组件中编写的文件上传代码。
class App extends Component {
state = {
selectedFile: null
};
fileSelectedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
});
};
fileUploadHander = () => {
Axios.post("");
render();
return (
<d
浏览 1提问于2020-03-04得票数 0
1回答
如何预填充react formik窗体
javascript、reactjs、formik
我有一个表，用来存储学生和编辑，但打开一个formik表单。 const EditStudentFrom = (props) => (
<Formik
initialValues={{studentId:"", firstName: "", lastName: "", email: "", gender: "" }}
validate={(values) => {
const errors = {};
if (!values.firstN
浏览 12提问于2021-09-05得票数 0
1回答
未使用react和formik提交表单
reactjs、react-redux、formik、yup
下面是我的模型(弹出)代码发送用户电子邮件地址到后端服务。我已经在我的Login组件中呈现了这个Model组件。我无法提交此表单。我不知道我在这里遗漏了什么，但我的其他表单工作得很好。我的Yup验证工作正常，但当我点击“发送”按钮时，它不会进入onSubmit处理程序，即使该字段已被验证。
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
浏览 11提问于2021-05-27得票数 0
回答已采纳
1回答
Formik使用React Native开关
reactjs、react-native、formik
我的目标是在Formik表单中使用基于Switch (来自React Native)的自定义组件。以下是表单组件的代码： class NewPreferences extends React.Component {
render() {
return(
<View style={styles.mainContainer}>
<View style={styles.newPreferencesContainer}>
<Formik
initial
浏览 10提问于2019-01-29得票数 6
回答已采纳
1回答
如何自动获取用户的地理位置值并将其作为POST请求发送到后端
javascript、reactjs、geolocation
我是一个初级前端开发人员，正在使用formik构建一个react web表单，该表单可以自动获取用户的位置，并将其作为post请求发送到后端。我已经能够使用geolocation API来获取用户的纬度和经度，但不知道如何将其作为对象和post请求传递。 这是一个电子商务网站，它根据附近的业务为用户提供不同的服务。 class DriverForm extends Component {
constructor() {
super();
this.state = {
ready: false,
where: { lat: null, lng: nu
浏览 15提问于2019-06-21得票数 1
回答已采纳
1回答
如何模拟formik提交的公理？
mocking、jestjs、axios、formik
我遇到的问题是，在单击submit按钮后，无法测试axios方法是否被调用。
____/axos.js中有以下内容：
const defaultResponse = { data: {} };
const __mock = {
reset() {
Object.assign(__mock.instance, {
get: jest.fn(() => Promise.resolve(defaultResponse)),
put: jest.fn(() => Promise.resolve(defaultResponse)),
post
浏览 8提问于2020-05-08得票数 3
回答已采纳
1回答
withFormik -如何显示SetStatus消息？
javascript、formik
有人知道如何在表单的电子邮件栏中显示表单setStatus消息吗？ import { Form, Checkbox, Input, Button } from 'antd';
import { withFormik } from 'formik';
import axios from 'axios';
const RegistrationForm = (props) => {
const { values, touched, errors, handleChange,
handleBlur,handleSubmit, se
浏览 13提问于2020-07-09得票数 1
2回答
React Formik :如何使用自定义onChange和onBlur
javascript、forms、reactjs
我从react的库开始，我不知道handleChange和handleBlur这两个属性的用法。
根据的说法，handleBlur可以被设置为<Formik/>上的道具，然后必须手动传递到<input/>。
我已经尝试过了，但没有成功：(为了更清楚起见，我保留了handleBlur的代码)
import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda"
浏览 23提问于2018-01-27得票数 64
回答已采纳
1回答
REACT.JS + FORMIK输入字段问题
reactjs、formik、react-fullstack
这是我遇到的第一个堆栈溢出问题。我正在尝试建立一个登录页面(做一个完整的堆栈应用程序与节点快速mongodb mongoose)和前端是反应。我遇到了一个问题，在我单击输入字段并单击输出之前，输入字段css不会注册。我正在使用Formik开发我的表单。我基本上有两个问题:如何解决这个问题，以及如何对运行在localhost:3003上的后端服务器进行API调用。代码如下：
import React from "react";
import "../App.css";
import { Formik } from "formik";
impor
浏览 0提问于2019-11-24得票数 0
1回答
在输入中同时显示错误
javascript、reactjs、forms、formik、yup
我一直在使用Yup和Formik在React中进行表单验证。现在，当用户模糊输入时，就会显示错误。下面是我的代码：
import React from "react";
import { Formik, Field } from "formik";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import * as yup from "yup";
浏览 1提问于2020-05-20得票数 0
1回答
在react中单击输入字段时，formik会呈现元素吗？
reactjs、formik
我正在尝试创建一个简单的登录表单，希望在单击输入字段时呈现一个元素。我在正常的react形式中实现了这一点，通过将布尔变量的值更改为true来呈现元素，当输入被写入时，如果用户触摸其他地方，则该元素将消失。一种切换的东西。但我不知道如何在formik中做到这一点。我的代码如下所示。 import React from "react";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from &
浏览 3提问于2020-04-09得票数 0
1回答
formik: TypeError:无法设置未定义的属性“props”
reactjs、create-react-app、formik
我试着把放到create中。
这是我的代码，目前正在获取TypeError: Cannot set property 'props' of undefined，但不确定原因。
userForm.js
import React from 'react';
import { Formik } from 'formik';
//import Yup from 'yup';
import * as Yup from 'yup';
import VirtualizedSelect from 'react-virtua
浏览 2提问于2019-07-15得票数 1
回答已采纳
1回答
Formik字段未触发onChange函数
reactjs、material-ui、formik
下面是我的表单字段，我想触发onChange (或onKeyUp)事件来执行一些操作。我尝试了前面与同一问题相关的问题中提供的解决方案，但到目前为止都没有效果。你能帮我看看这里出了什么问题吗？ <Formik
initialValues={{
jobId:"45445";
}}
onSubmit={(data, { setSubmitting }) => {
setSubmitting(true);
console.log(data);
setSubmitting(false);
}}
onBlur={(data) => {
浏览 22提问于2020-07-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
