- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 React 代码中,连同其他输入类型,我还必须使用 material-ui 的 ToggleButtonGroup 组件。 formik-material-ui 不直接支持此组件,我一直在尝试编写自定义包装器,但没有取得太大成功。这是我的组件的外观(formikToggleButtonGroup.tsx):
import * as React from 'react';
import MuiToggleButtonGroup, {
ToggleButtonGroupProps as MuiToggleButtonGroupProps,
} from '@material-ui/lab/ToggleButtonGroup';
import { FieldProps } from 'formik';
export interface ToggleButtonGroupProps
extends FieldProps,
Omit<MuiToggleButtonGroupProps, 'name' | 'value'> {}
export function fieldToToggleButtonGroup({
field,
// Exclude Form
form,
...props
}: ToggleButtonGroupProps): MuiToggleButtonGroupProps {
return {
...props,
...field,
};
}
export default function ToggleButtonGroup(props: ToggleButtonGroupProps) {
return <MuiToggleButtonGroup {...fieldToToggleButtonGroup(props)} />;
}
ToggleButtonGroup.displayName = 'FormikMaterialUIToggleButtonGroup';`
然后,我试图像这样使用它:
import Layout from '../../components/layout'
import Header from '../../components/header'
import ToggleButtonGroup from '../../components/formikToggleButtonGroup.tsx'
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import ToggleButton from '@material-ui/lab/ToggleButton';
import { withStyles } from '@material-ui/core/styles';
import { green, orange } from '@material-ui/core/colors';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
import * as Yup from "yup";
import { Formik, Form, Field} from 'formik';
import { TextField, RadioGroup } from 'formik-material-ui';
import ToggleButtonGroup from '../../components/formikToggleButtonGroup.tsx'
import ToggleButton from '@material-ui/lab/ToggleButton';
const StyledButton = withStyles((theme)=>({
root: {
background: theme.palette.background.paper,
color: theme.palette.text.primary,
marginBottom: theme.spacing(3),
marginRight: theme.spacing(4),
borderRadius: '0',
borderWidth: '1px',
borderColor: theme.palette.divider,
borderLeft:'1px solid rgba(0, 0, 0, 0.12) !important',
padding: '0 30px',
fontSize:'0.7rem',
fontWeight:'400',
'&$selected': {
color: theme.palette.background.default,
backgroundColor: theme.palette.warning.main,
},
'&:hover': {
color: theme.palette.background.default,
backgroundColor: theme.palette.warning.light,
},
'&$selected:hover': {
color: theme.palette.background.default,
backgroundColor: theme.palette.warning.light,
},
},
selected:{
color: theme.palette.background.default,
backgroundColor: theme.palette.warning.main,
},
hover:{
color: theme.palette.background.default,
backgroundColor: theme.palette.warning.light,
},
label: {
textTransform: 'capitalize',
},
}))(ToggleButton);
export default function GetUserInfo() {
const classes = useStyles();
const [selectedValue, setSelectedValue] = useState('yes');
const handleRadioChange = (event) => {
setSelectedValue(event.target.value);
};
const handleSubmit = (evt) => {
evt.preventDefault();
alert(`Submitting Name ${name} ${phone} ${email}`)
}
const handleChange = (event, newAlignment) => {
alert(newAlignment)
if (newAlignment !== null) {
setGrade(newAlignment);
}
};
return (
<Layout title="My first Next page" meta_desc="Best online coding classes for kids & children">
<CssBaseline />
<Header />
<Container component="main" >
<Grid container spacing={4}>
<Grid item xs={12} sm={8} className={classes.boxStyle}>
<Box mx="auto" p={2}>
<Formik
initialValues={initialValues}
validate={
values => {
const errors = {};
if (!values.parentEmail) {
errors.parentEmail = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.parentEmail)
) {
errors.parentEmail = 'Invalid email address';
} else if (!values.parentName){
errors.parentName = 'Required';
} else if (!values.countryCode){
errors.countryCode = 'Required';
} else if (!values.phone){
errors.phone = 'Required';
} else if (!values.childName){
errors.childName = 'Required';
} else if (!values.grade){
errors.grade = 'Required';
} else if (!values.computer){
errors.computer = 'Required';
}
return errors;
}
}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
setSubmitting(false);
alert(JSON.stringify(values, null, 2));
}, 500);
}}
>
{({ submitForm, isSubmitting }) => (
<Form className={classes.root} autoComplete="off">
<Box>
<Field
component={TextField}
fullWidth
name="childName"
onChange={e => setChildName(e.target.value)}
required id="standard-required" label="Kid's Name"
helperText="Certificate will be issued with this name"/>
</Box>
<Box mt={3} className={classes.labelFont}>
Kid's Grade?
</Box>
<Box mt={2}>
<ToggleButtonGroup
component={ToggleButtonGroup}
mt={7}
name="grade"
//value={grade}
exclusive="true"
//onChange={handleChange}
aria-label="text alignment"
>
<StyledButton className={classes.buttonMargin}
value="1" aria-label="left aligned">
<label class="btn btn-secondary m-2 rounded">
Grade <br/> <strong>1 - 3</strong>
</label>
</StyledButton>
<StyledButton className={classes.buttonMargin} value="2" aria-label="centered">
<label class="btn btn-secondary m-2 rounded ">
Grade <br/> <strong>4 - 6</strong>
</label>
</StyledButton>
<StyledButton className={classes.buttonMargin} value="3" aria-label="right aligned">
<label class="btn btn-secondary m-2 rounded">
Grade <br/> <strong>7 - 9</strong>
</label>
</StyledButton>
<StyledButton className={classes.buttonMargin} value="4" aria-label="justified">
<label class="btn btn-secondary m-2 rounded">
Grade <br/><strong>10 - 12</strong>
</label>
</StyledButton>
</ToggleButtonGroup>
</Box>
<Button
disabled={isSubmitting}
onClick={submitForm}
//type="submit"
//onClick={handleSubmit}
fullWidth
variant="contained"
color="primary"
className={classes.submit}>Let's Start
</Button>
</Form>
)}
</Formik>
</Box>
</Grid>
</Grid>
</Container>
</Layout>
)
}
我面临的问题是 ToggleButtonGroup 的值不是由 Formik 设置的。它始终显示初始值。
最佳答案
我能够制作 表单 与 ToggleButtonGroup
一起工作通过手动处理其 onChange
事件,并手动更新 formik 实例:
export default function MyComponent() {
const formik = useFormik({
initialValues: {
roleType: 0,
},
onSubmit: async (values) => {
// send ajax request
},
});
// handler for ToggleButtonGroup
const handleRoleChange = (event: any, role: string) => {
// manually update formik
formik.setFieldValue('roleType', role);
};
return (
<form noValidate onSubmit={formik.handleSubmit}>
<ToggleButtonGroup
exclusive
id="roleType"
value={formik.values.roleType}
onChange={handleRoleChange}
>
<ToggleButton value={0}>
<PersonIcon />
<div>Role 1</div>
</ToggleButton>
<ToggleButton value={1}>
<RestaurantIcon />
<div>Role 2</div>
</ToggleButton>
</ToggleButtonGroup>
<Button type="submit">
Submit
</Button>
</form>
);
}
关于reactjs - formik-material-ui 不适用于 ToggleButtonGroup 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62305381/
我需要用 formik 或 yup 来验证动态创建的字段。我已经在 jquery validatioh here 中看到了这个验证。 对此 我的代码在这里 https://codesandbox.io
我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证,但对自定义组件没有进行验证。我现在正尝试将 Formik 验证添加到我的自定义 categoriesMult
我有一个通过 Formik 输入的数字,但即使它通过了 Formik 验证,生成的输入仍归类为 string 。 {({ va
我有一个 formik 表单如下。我能够在 formik 组件中提交表单。但是我怎么能在 formik 组件之外提交它(对于这个例子来说是在页脚按钮内)。 Formik 网址:Click here 特
我们有自己的输入组件(例如 Checkbox 、 Textbox ,甚至 CurrencyInput 组件) 我们现在使用Formik 。所以我们替换了所有 { ... return (
当前行为 (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => {
在 formik , 属性(property)内 onChange ,有时 onChange = {formik.handleChange}有时被称为 onChange = {v => formik.
我正在使用 Yup 来验证我的 Formik 表单,但我不知道如何在 Yup/Formik 中验证 radio 输入。 最佳答案 您验证 radio 组。唯一可能的验证失败是,如果您没有选择默认按钮,
我正在使用 formik 和 @jbuschke/formik-antd。我需要将掩码 +7 (___) ___-__-__ 应用于输入,因此我想使用 react-input-mask。 同时我需要解
我正在尝试使用位于 外部的外部按钮提交表单或标签 如下面的屏幕截图所示,我的按钮位于 Bootstrap > 模态页 footer 分,并且它们位于表单标记之外。当用户单击 Submit 时,我尝试
我正在尝试使用 React、Formik、react-select 和 Firebase(云 firestore)在 React 中构建表单。 当我只使用一次 react 选择时,一切正常。只有一种状
我有客户对象,其中有一系列与之关联的信用卡,如下所示: { "_id":"5d63e3a32f093f2b5e41ef96", "firstName": , "lastName": ,
我正在开发一个单独的模块,该模块旨在包含支持 HTML 输入元素的 formik。 问题是我无法使用 useFields()钩子(Hook),因为我的模块组件没有连接到 formik 上下文。 这是我
我正在尝试重置表单中的所有错误。 我尝试使用 setErrors和 setStatus ,这些都不起作用。 Formik 状态中的错误未清除。 setErrors({errors: {}}) 和 se
当我打开屏幕时,在我第一次提交表单之前我没有看到任何验证错误。正确输入电子邮件地址并通过点击按钮提交表单后,表单逻辑将正常工作。显示警报并重置字段(有意) 但是,一旦我关闭警报,Formik 仍然向我
我有以下表格: import React from 'react' import PanelInputField from './form_components/panel_input_field'
我有以下 Formik 表格 { console.log(JSON.stringify(values)); setSubmitting(true); fetch('/logi
我一直在尝试在 React 中重写我的初学者表单以使用 Formik。 我已经进入正在呈现表单的状态,但是,由于某种原因,我无法更新字段。很明显,我在某个地方犯了一个错误,导致 Formik 无法更新
我想在 formik 中使用 yup 验证我的表单。假设我有 4 个字段 A、B、C、D,它们都是字符串。如果我想让至少一个字段不为空,我应该如何编写验证模式,那么这是一个有效的表单?提前致谢! 最佳
我在 reactjs 中使用 formik 进行表单管理,我有一个关于验证的问题。 我有两个字段,一个是选择国家的选择控件,另一个是邮政编码。 在 country 数组中,我们有正则表达式来验证邮政编
我是一名优秀的程序员,十分优秀!