formik组件正在将文本类型的受控输入更改为非受控输入
formik组件是一个用于处理表单的React库。它提供了一种简单且强大的方式来管理表单状态和验证输入。formik组件的主要目标是将文本类型的受控输入更改为非受控输入。
受控输入是指将表单的值与React组件的状态进行绑定，通过onChange事件来更新状态，并通过value属性来显示当前值。这种方式需要手动处理输入的变化和验证逻辑。
而非受控输入则是将表单的值交给浏览器来管理，通过ref属性来获取输入的值。这种方式更加简洁，不需要手动处理输入的变化和验证逻辑，但是失去了对输入的完全控制。
formik组件通过使用React的Context API和高阶组件的方式，将受控输入转换为非受控输入。它提供了一系列的表单组件，如Input、Textarea、Select等，这些组件内部封装了非受控输入的逻辑，使开发者可以像使用受控输入一样使用它们。
formik组件的优势在于简化了表单处理的复杂性，提供了表单状态的管理和验证的功能，减少了开发者的工作量。它还支持表单的嵌套和动态表单的处理，具有良好的扩展性。
formik组件适用于各种表单场景，包括登录、注册、数据提交等。它可以与其他React库和UI框架无缝集成，如Ant Design、Material-UI等。
腾讯云提供了云计算相关的产品和服务，其中与表单处理相关的产品是腾讯云Serverless Framework。Serverless Framework是一个开发、部署和管理无服务器应用的工具，它支持多种语言和框架，可以轻松构建和部署表单处理应用。
腾讯云Serverless Framework产品介绍链接地址：https://cloud.tencent.com/product/sls
相关·内容
1回答
如果使用" Value“字段，则不能更改React输入组件的值
javascript、reactjs、typescript、material-ui
我将material-UI用于我的React应用程序。 我想通过单击另一个组件来删除插入到输入字段中的值。 问题是只有在没有value属性的情况下，OutlinedInput字段才能正常工作。如果添加了该值，则来自value的值将显示在OutlinedInput字段中，并且不能插入其他值。但是，如果OutlinedInput没有value属性，我不能通过单击另一个React组件来删除OutlinedInput的值。 const Search = (props: any) => {
const searchedMovie = useSelector(
(state: Root
浏览 63提问于2021-08-25得票数 1
回答已采纳
2回答
使用React处理大型表单
javascript、reactjs、react-redux
我在React-redux页面中有一个很大的注册表。
我不需要绑定任何数据到表单，因为它总是加载空白，提交时可以只发送数据到API，并被重定向到“请检查我们的电子邮件”页面。
我还有一个问题，那就是我正在使用MaterializeReact和他们的自定义组件。这只是呈现为带有名称的输入，因此传统的formdata将保持不变。
所有的在线示例似乎都希望我创建一个状态，然后对于每个输入元素，我将状态绑定到它，然后我所有的值都将是this.state。
这看起来有点长，因为我有30，40个字段。
我找到了一种使用ref的方法，但我不想使用它，因为我知道ref字符串正在被弃用。ref解决方案如下所示：
浏览 0提问于2018-01-30得票数 3
回答已采纳
2回答
如果使用自己的"close“按钮切换组件的可见性，那么"React way”是什么？
javascript、reactjs
我在角落里有一个带有关闭按钮的组件。我见过很多很棒的例子，如何在父组件中使用条件呈现来显示和隐藏组件
parent.render (<>
...
{ this.displayState? <MyComponent/> : null }
...
</>)
我意识到有多种方法可以解决这个问题，但这不是这篇文章的主题。我可以使用这种方法从父级切换状态，但是如何从组件内部切换显示/可见性状态呢？即点击它的关闭按钮？我必须向组件传递一个属性才能从它内部访问父displayState变量吗？这看起来很麻烦。
这在JQuery和Dom中是不需要动脑筋的，但我想知道reac
浏览 2提问于2020-03-06得票数 1
7回答
如何结合腾讯云开发微信小程序？
api、serverless、html5
目前，微信小程序越来越流行，而且功能越来越强大，在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ，小程序的开发快捷，使用方便，越来越多的产品会落地到微信小程序上。但传统的微信小程序开发，和普通的H5页面开发或者原生APP开发相比，只是改变了前端部分的开发方式，还是离不开厚重的后台开发。 现在的小程序，在后台服务方面，正在往 serverless 趋势方向发力。小程序提供了云厂商的无服务器函数 SCF，使得小程序无需搭建一个后台服务即可运行。如何结合腾讯云开发微信小程序？
浏览 3743提问于2018-09-28
1回答
Formik -句柄文件黑客-为什么组件重新呈现时，文件被选中？
reactjs、file-upload、formik
我很清楚formik不支持文件上传。我读到外面有黑客。我已经用onChange，setFieldValue和event.current.target试过了下面这个。问题是，当选择文件时，组件呈现，整个页面变为空白。我做错了什么？谢谢!
import React from 'react';
import { Formik, Form, Field } from 'formik';
const initialValues = {
file: ''
};
const TestArt = () => {
const onSubmit
浏览 6提问于2020-01-08得票数 0
回答已采纳
2回答
单选按钮不工作
reactjs、react-redux
我已经创建了一个单选组件，但当单击它时，它没有显示选中，这是代码
import React from 'react';
import classnames from 'classnames';
const RadioButton = (field) => {
const inputClasses = classnames('form-group has-feedback ',{
'has-error': field.meta.touched && field.meta.error,
}
浏览 3提问于2017-08-09得票数 3
4回答
我创建了这个示例，下面是代码：
import React, { ReactNode, useState } from "react";
import { Formik, FormikConfig, FormikProps, Form, FormikErrors } from "formik";
import { useEffect } from "react";
import { scrollToValidationError } from "./scrollToValidationError";
// const isEmpt
浏览 1提问于2020-04-07得票数 1
回答已采纳
3回答
请问serverless和云开发这两个区别是什么，serverless应用和云开发应用有什么区别？
serverless、serverless 微服务平台、云开发 CloudBase、小程序·云开发
刚接触这些东西，感觉serverless和云开发这两个是一个东西，有些分不清，查了些资料感觉越看越晕。麻烦大佬们解释一下呗
浏览 833提问于2021-03-17
2回答
有反应模组的受控元件，预填充输入。
reactjs、forms、redux
我使用在基于web的应用程序中构建表单。我也在用Redux。
在这种情况下，我需要使用这些表单编辑信息，而不仅仅是输入信息。这使我认为，我需要确保表单或输入成为呈现来自Redux存储的值的受控组件--或任何真正的状态数据。
我怎样才能做到这一点？我在他们的文件里找不到这个。
编辑
库react-form现已停用，取而代之的是其他库，如informed或react-final-form。
浏览 0提问于2018-09-20得票数 1
回答已采纳
1回答
使用formik显示字段名列表中的输入字段
javascript、reactjs、formik、yup
我有表单字段名的列表，例如list = ["orgName", "addressLine1"]，列表可以是任意长度的。
我试图使用formik呈现表单，但它会引发错误。
组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制的转换为受控的(反之亦然)。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。更多信息：
// @flow
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup
浏览 1提问于2020-01-20得票数 0
2回答
React受控组件与非受控组件的总体定义
javascript、reactjs
我使用React已经有好几个月了，我很清楚像这样来源的组件的受控和非受控性质
一切都很清楚，直到我偶然发现了这篇文章
我过去常常认为受控与非受控是控制状态的React组件，然后是受控的，DOM引用处理，然后是非受控的(使用引用)
然后，第三篇文章改变了我的观点，如果组件有来自任何React组件(父组件或组件本身)的单一来源，则这些组件是受控制的。好吧，好吧！这意味着React组件从父props接收或播种值以映射构造函数中的组件本地状态变得不受控制。
如果你看一下文章3的两个推荐的比较部分，我能使b/w控制的唯一的区别就是这个。
state = { email: this.props.de
浏览 2提问于2018-09-06得票数 1
1回答
更改输入标记中的默认值
forms、reactjs、textfield、placeholder、default-value
我正在使用react-form创建一个输入表单。我正在使用标签。我希望预先填充输入字段，但希望用户仍然能够更改输入的默认值。React是我使用的前端语言。我尝试将输入标记内的readOnly字段设置为false。它允许我点击字段，但我仍然不能退格默认日期并将其更改为其他日期。
当我使用占位符，而不是输入标签时，会出现重叠问题(检查所附图像)。一旦输入一个值，就不会有任何问题，因为“到期日”会随着现有功能的增加而提前。
我需要占位符仅在我单击"Due Date“字段输入值时显示，或者在使用输入标记时能够更改默认值。我使用的是react版本16.2.0
&l
浏览 10提问于2018-02-16得票数 1
回答已采纳
25回答
【开箱吧腾讯云】开发工具千千万，哪个最高效最好用？
腾讯云、产品、工具、开发、开发工具
开发工具千千万，哪个最高效最好用？
在关键时刻解决了你的卡点和痛点，欢迎你和我们一起分享你使用过的腾讯云宝藏工具！
点赞最高的前5名将获得猫王小王子花梨原木便携蓝牙音箱1个（截止时间：11月12日24:00）
另外在11月9日晚20:00-21:00
【开箱吧腾讯云】将迎来3位开发大神分享自身工具箱
快来腾讯云开发者视频号预约吧！更有超多双十一产品优惠等你！
图片
浏览 1736提问于2022-11-02
1回答
在React的受控组件中使用输入值是可选的吗
reactjs
我正在学习React，并且想要学习如何正确地使用表单。然后我发现有一种叫做受控表单的东西，所以我写了这段代码： <input
name='name'
value={this.state.name}
onChange={e => this.handleChange(e)}
/> 既然我们已经用onChange将输入数据添加到状态，那么使用"value“属性是可选的吗？仅仅为了确保输入数据被正确地添加到状态就需要值，这是真的吗？只是为了自信？
浏览 22提问于2020-03-19得票数 0
1回答
Formik不从外部源从填充的Autocomplete发送值
javascript、reactjs、tailwind-css、formik
使用React、Formik和Tailwind发送表单。我有一些来自(CanadaPost)的输入。因为我没有完成所有字符的键入，API为我提供了一些选项，所以我只需单击API中的建议。这些选项填充到剩余字段。福米克没有占领这个州。它只记录了我输入的内容。我怎么才能让Formik捕捉剩下的角色。
字段是: address1，address2，城市，州.在adddress1上，我输入8303，它将给我从8303开始的地址建议，然后选择正确的地址，然后填充正确的数据并将它们传递给输入字段。问题是，Formik没有捕获状态，因为域没有被触及。
<Formik
initialValues = {
浏览 8提问于2022-06-16得票数 0
1回答
如果我已经使用了antd4表单组件，我应该使用Formik吗？
reactjs、antd、formik
作为标题，Formmik和antd Form都做同样的事情：
%1验证%2数据绑定%3错误消息
formik
antd表单
它们是否具有相同的功能？
浏览 2提问于2020-04-12得票数 1
3回答
将值从formik传递到状态
reactjs、formik
我在我的react应用程序中使用formik作为表单。 class myComponent extends Component {
constructor(props) {
this.state = {
inputData: {}
}
}
render() {
return(
<Formik>{({ errors, handleChange, values }) => (
console.log(values);
<Field type="text" name="addr
浏览 26提问于2019-02-14得票数 3
3回答
将道具转移到状态的正确方法(如果需要) React & Redux
reactjs、react-redux
我已经创建了一个Create- react -App react应用程序& Redux。
我使用connect (通过mapStateToPrope)将我的userReducer映射到state，即：
function mapStateToProps({ userProfile }) {
return { userProfile: userProfile ? userProfile : null };
}
export default connect(mapStateToProps, fetchUserProfile)(Profile);
我有一个已经绑定了UserProfile F
浏览 0提问于2018-02-21得票数 3
回答已采纳
1回答
如何迭代一个功能组件，然后通过更改react中的记录来设置状态？
reactjs、typescript
您好，我已经创建了一个父组件&然后在JSON数组上迭代子组件&然后我尝试对子组件进行一些更改。它不能正常工作。 我的父组件代码是- import React from 'react';
const jsonData = require('sampleData.json');
export const ParentComponent = (): React.ReactElement => {
return (
<React.Fragment>
{jsonData.myList.ma
浏览 20提问于2021-03-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
