Formik单选按钮不使用嵌套的对象值
Formik是一个用于构建表单的React库。它提供了一种简化和优化表单处理的方式，包括表单验证、表单状态管理和表单提交等功能。
对于Formik中的单选按钮，可以通过使用Field组件和Radio组件来实现。不需要使用嵌套的对象值，可以直接使用Field组件的name属性来指定表单字段的名称，并使用Radio组件的value属性来指定单选按钮的值。
以下是一个示例代码：
import { Formik, Field, ErrorMessage } from 'formik';
const MyForm = () => {
return (
<Formik
initialValues={{ gender: '' }}
onSubmit={(values) => {
console.log(values);
}}
>
<form>
<div>
<label>
<Field type="radio" name="gender" value="male" />
Male
</label>
<label>
<Field type="radio" name="gender" value="female" />
Female
</label>
</div>
<ErrorMessage name="gender" component="div" />
<button type="submit">Submit</button>
</form>
</Formik>
);
};
export default MyForm;在上面的示例中，我们使用Field组件和Radio组件创建了两个单选按钮，它们的name属性都设置为"gender"，分别对应"male"和"female"两个值。当用户选择其中一个单选按钮时，Formik会自动更新表单的gender字段的值。
关于Formik的更多信息和使用方法，你可以参考腾讯云的Formik产品介绍。
相关·内容
1回答
使用对象数据类型响应useState
reactjs、react-native、react-hooks、use-state、react-forms
因此，我是新的反应，我目前正在工作的形式。首先，这是我写的全部代码：
const [optionGender, setOptionGender] = useState({value: '', label: ''});
const options = [
{value: 'male', label:'male'},
{value: 'female', label: 'female'}
]
return (
<>
<h3>
浏览 4提问于2021-11-27得票数 0
2回答
如何启用“提交”按钮“更改”单选按钮
html、angular、forms、typescript
下面是我的编辑表单的代码
<form [formGroup]="editForm" (ngSubmit)="saveUser()" novalidate>
<div class="form-group">
<label class="block">Gender</label>
<div class="clip-radio radio-primary">
<input type="radio" id=&#
浏览 1提问于2018-02-05得票数 0
回答已采纳
3回答
在react中，在处理完所有输入字段后，取消选择单选按钮。
javascript、html、css、reactjs、radio-button
我正在创建一个表单，在这个表单中，用户输入输入文本字段:名称、角色并通过单选按钮选择性别。在单击submit按钮时，用户将输入的数据存储在状态中。这些值显示在窗体下面。我想要的是，每次按下submit按钮时，都会显示新添加的值，并且所有字段也会变为空值。我知道如何重置输入文本字段，但无法重置单选按钮。知道我怎么能重新设置单选按钮。守则是：
const [user, setUser] = useState({}); // state is created
表格正文是：
<div className="entryForm">
<spa
浏览 4提问于2022-10-14得票数 0
回答已采纳
1回答
如何在html表单中使用角度材质单选按钮
javascript、angularjs、html、angular-material
我正在尝试使用AngularJS材料作为我的前端框架，目前我只有一个简单的表单，其中有三个文本输入字段和一个单选按钮组。在我添加angular材质之前，一切都正常，现在只提交了文本输入。
<form name="projectForm" action="../nameServlet" method="post">
<md-input-container class="md-block">
<label>First Name</label>
&l
浏览 9提问于2016-09-06得票数 0
回答已采纳
2回答
Reactjs:我正在根据状态检查单选按钮，但当选中某个单选按钮时，无法单击其他单选按钮
javascript、reactjs
我的单选按钮取决于状态的值。如果用户是男性，则状态的值是M，并且单选按钮Male也被选中。现在，我需要将其更改为Female。但是，如果我单击Female单选按钮，它不会从Male更改。
这是我的代码：
// App.js
const [ gender, setGender ] = useState('');
return (
<GenderComponent
value={gender}
name={"gender"}
onSubmit={handleSubmit}
/>
)
//
浏览 0提问于2021-06-11得票数 0
1回答
Formik不会在控制台上记录值
javascript、reactjs、react-native、formik、yup
我想使用Formik库创建一个表单，但在使用yup进行数据验证时，我无法获得控制台中的值，如name和password字段。不幸的是，我不知道是什么导致了这个问题。 这是我到目前为止所得到的： 仅供参考：KerrorMessage是我的自定义错误 import React from "react";
import { Formik, Form, Field } from "formik";
import * as yup from "yup";
import KerrorMessage from "./KerrorMessage"
浏览 16提问于2021-11-01得票数 0
2回答
将单选按钮和复选框中的数据存入数据库
php、html、forms
我在网页上有一个带有单选按钮和复选框的表单，当表单提交时，我试图将这些数据插入到数据库中。当我提交表单时，字段保持不变(默认条目)。所有其他条目都会被插入，只是这两个条目给了我一些问题。
创建表：
CREATE TABLE users (
gender varchar(255) NOT NULL,
specialmem BOOL NOT NULL,
) ENGINE=InnoDB;
表格：
<div class="form-group">
<label for="sex">Gender:</label>
浏览 1提问于2016-10-04得票数 0
回答已采纳
1回答
如何在redux表单单选按钮中添加初始值
javascript、reactjs
我在我的reactjs应用程序中添加了redux表单，我有文本和单选按钮。我想将初始值添加到来自后端api的所有字段中。但问题是，我尝试的方式，我是获得初值的文本，但不是单选按钮。
这就是我在文本中所做的，见下面的代码。
editProfile.jsx
<form onSubmit={handleSubmit}>
<Grid>
<Field name="name" component={renderInputField} />
浏览 3提问于2020-05-17得票数 1
回答已采纳
2回答
使用smtpjs在纯javascript中发送表单的值
javascript、smtp、smtpjs
我正在尝试使用来捕获表单的价值并将其发送到电子邮件中。
到目前为止，我有以下表单标记：
<form>
<input type="text" name="fullname" placeholder="Full Name" />
<input type="text" name="idea" placeholder="Idea" />
<div class="fruits">
<input type="c
浏览 0提问于2021-04-13得票数 0
1回答
在“反应”中，如何选择/检查单选按钮？
javascript、reactjs、radio-button
我不能点击或选择任何我的单选按钮。有人能帮我解决单选按钮的反应吗？
我试着删除e.preventDefault()，但这也没有帮助。
下面是我的代码：
文件1:
this.state = {
fields: {
gender: ''
}
}
fieldChange(field, value) {
this.setState(update(this.state, { fields: { [field]: { $set: value } } }));
}
<Form
fields={this.state.fields}
on
浏览 0提问于2018-08-06得票数 0
3回答
角2中模板驱动表单和NgFor的单选按钮验证
angular、angular2-forms
请有人解释一下，为什么在不使用NgFor的情况下验证单选按钮是有效的：
@Component({
selector: 'rio-app',
template: `
<form #myForm="ngForm">
<label>
Male:
<input type="radio" name="gender" value="Male"
ngModel required #gender="ngMod
浏览 5提问于2017-01-17得票数 5
回答已采纳
2回答
从html标签中获取值，该标签带有使用FOR属性的放射按钮辅助
c#、javascript、html、asp.net、for-attribute
一个带有单选按钮的html表单，它由HTML标签辅助，如下所示。
<form action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<i
浏览 2提问于2013-11-26得票数 0
回答已采纳
2回答
使用单选按钮id更新数据库列
php、mysql、database、increment
试图建立一个简单的数据库和表单来收集数据。我试图在tables列中增加值，但不知道如何告诉sql根据单选按钮中的id值更新该列。任何帮助都会很好。
身份证男女
1/5/3
表格：
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" name="g
浏览 3提问于2015-07-03得票数 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
2回答
单选按钮不按角度工作的默认选择
angular、radio-button、angular-reactive-forms
我有三个单选按钮。我想用它们的角度反应形式。在默认选择任何单选按钮的情况下，我无法触发更改事件。我想默认选择男性单选按钮，但更改事件的默认选择不触发。请帮我找出我在这里做错了什么。
我试着把这种行为放进垃圾桶里。这是链接
我的组件代码
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";
export interface Gender {
id: number;
value: s
浏览 4提问于2019-12-25得票数 1
回答已采纳
2回答
我想向我的单选按钮组中添加一条自定义验证消息。
它在以下条件下运行良好：
如果我选择第二个单选按钮“女性”并点击提交。
如果我选择第一个单选按钮“男性”并点击提交。
如果我不选择任何单选按钮并单击submit，它将显示验证消息。选择第一个单选按钮并单击submit，表单将提交。
它在下列情况下不起作用：
如果我单击submit而不检查任何单选按钮，它将显示验证消息。之后，如果我选择第二个单选按钮“女性”并点击提交，它仍然显示在第一个单选按钮“男性”上的验证信息。
下面是我写的代码
<html>
<head>
<met
浏览 2提问于2020-07-29得票数 2
3回答
指定单选按钮的初始值
reactjs、react-final-form、final-form
我希望在打开表单时选中"Exact“单选按钮： <Form
onSubmit={onSubmit}
initialValues={{ match_type: "exact" }}
render={({ handleSubmit, form, reset, submitting, pristine, values }) => (
<form
onSubmit={() => {
handleSubmit();
}}
&
浏览 44提问于2020-08-18得票数 1
2回答
默认情况下使单选按钮校验
angular、angular7
我已经请求为男性和女性2单选按钮，我想让第一个单选按钮默认选中。
我已经添加了“单选”按钮的“选中”属性，但仍然显示未选中的属性。
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="male" [(ngModel)]="data.gender" #gender="ng
浏览 2提问于2019-09-13得票数 2
回答已采纳
1回答
单选按钮只显示第一个输入，如何获得所需的输入？
javascript、jquery、html
单选按钮不能正常工作，即使我选择其他的单选按钮，它也总是给出male作为输出。我正在从提交的表单创建json对象，您可以签入该对象以获取单选按钮值。
<script>
$.validator.setDefaults({
submitHandler: function() {
var $inputs = $('#myForm :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
docu
浏览 0提问于2016-03-07得票数 0
1回答
如何使Yup条件验证与Reactjs中的Formik一起工作？
reactjs、forms、validation、formik、yup
我有一个Formik表单，其中有两个单选按钮，要求用户选择是工作人员还是学生，并根据他的选择，我将能够显示不同的字段供用户使用Yup验证填写。我不知道如何在这里使用when()方法!！
这是我的福米克
<Formik
initialValues ={{
name: '',
school: '',
jobType: '',
parentName: '',
parentPhone: '&
浏览 11提问于2022-04-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
