- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试在 React 中重写我的初学者表单以使用 Formik。
我已经进入正在呈现表单的状态,但是,由于某种原因,我无法更新字段。很明显,我在某个地方犯了一个错误,导致 Formik 无法更新状态。我错过了什么?
一个示例表单组件:
export const TextBox: React.SFC<FieldProps<any> & CustomFormElementProps> = ({
field, // { name, value, onChange, onBlur }
form: { touched, errors },
loading,
...props
}) => (
<div className="row form-group" key={field.name}>
<label className="col-sm-2 control-label">
<ReactPlaceholder showLoadingAnimation ready={!loading} type="text" rows={1} className="control-label">
{props.label}
</ReactPlaceholder>
</label>
<div className="col-sm-10">
<ReactPlaceholder showLoadingAnimation ready={!loading} type="text" rows={1} className="form-control">
<input type="text"
disabled={props.disabled}
className="form-control"
id={field.name}
onChange={field.onChange}
onBlur={field.onBlur} {...props} />
{touched[field.name] && errors[field.name] && <span className="text-danger">{errors[field.name]}</span>}
</ReactPlaceholder>
</div>
</div>
);
renderFormElements() {
var formFields = this.props.detailsElements.map((item) => {
switch (item.type) {
case FormElementType.TextLine:
return <TextLine
name={item.name}
label={item.label}
disabled={!this.state.editMode}
loading={item.loading}
value={item.defaultValue}
key={'TextBox_' + item.name}
/>
case FormElementType.TextBox:
return <Field
type="text"
name={item.name}
label={item.label}
component={InputElements.TextBox}
disabled={!this.state.editMode}
loading={item.loading}
value={item.defaultValue}
key={'TextBox_' + item.name}
/>
case FormElementType.DropDown:
return <Field
name={item.name}
label={item.label}
component={InputElements.DropDown}
disabled={!this.state.editMode}
loading={item.loading}
value={item.defaultValue}
options={item.options}
key={'DropDown_' + item.name}
/>
case FormElementType.RadioGroup:
return <Field
type="radio"
name={item.name}
label={item.label}
component={InputElements.RadioGroup}
disabled={!this.state.editMode}
loading={item.loading}
value={item.defaultValue}
options={item.options}
key={'RadioGroup' + item.name}
/>
}
});
var initialValues:{ [k: string]: any } = {};
this.props.detailsElements.map((item) => {
initialValues[item.name] = item.defaultValue;
})
console.log(initialValues);
var formSection =
(<Formik initialValues={initialValues} onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
actions.setSubmitting(false)
}, 1000)
}}>
<Form key="mainForm">
{formFields}
</Form>
</Formik>)
return formSection;
最佳答案
您的 formFields 函数获得了所有 Formik Prop 的好东西。
它包含 handleChange
- 使用此处理程序作为您的更改。
此外,请确保字段“id”与值键相同。
const {
values,
touched,
errors,
dirty,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
} = this.props;
<FormControl
id="username"
required
placeholder="Enter Username"
value={values.username}
error={touched.username && errors.username}
onChange={handleChange}
onBlur={handleBlur}
/>
关于reactjs - Formik 表单未在编辑时更新字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51396336/
我需要用 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 数组中,我们有正则表达式来验证邮政编
我是一名优秀的程序员,十分优秀!