Formik 表单在编辑时不更新字段

Question

我一直在尝试在 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;

我假设 onChange 事件处理程序由 Formik 处理，并且如果我不想做特殊的事情，我不需要为此提供任何东西。我在这里错过了什么？

谢谢！

Answer 1

您的 formFields 函数获得了所有 Formik 道具。它包含 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}
    />

Answer 2

尝试将名称属性放入输入元素中 name 是你从 field.name

得到的

Formik 表单在编辑时不更新字段

Formik form not updating fields upon edit

reactjs

formik