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;

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

谢谢！

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}
    />

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

1 个答案: