如何使用带有重置按钮的Formik重置反应选择单输入

问题描述 投票:0回答:1

我对React还是比较陌生,尤其是对react-select和Formik都是陌生的。我有一个包含Input组件和三个Select组件的表单。当我只使用一个基本的isMulti按钮时,一次使用reset多个选定选项的输入以及两个选择就很清楚了,但是单个选择组件却没有。如果我检查values是什么,则为空,但UI不会反映此更改。我尝试过:

利用resetForm(),将其设置为initialValues以及一个空对象。

使用onReset并从那里隐式调用resetForm

使用setFieldValue的一些不同变体

我以为这可能是我设置initialValues的方式,但是现在我只是盘旋而过,希望对此更有经验。

((PS-文档中的示例向您展示了如何使用带有重置按钮的Formik使用React-Select,但未提供非多重选择的示例。)

单个选择的名称为'paid',并且我使用值和标签属性包含了我认为正确的对象

简化的沙箱。所需的行为:单击“重置”会将选项重置为initialValues,并在UI中显示占位符文本。

https://codesandbox.io/s/peh1q

const costOptions = [
   { value: 'true', label: 'Paid' },
   { value: 'false', label: 'Free' },
];

Resources.propTypes = {
  initialValues: shape({
    category: array,
    q: string,
    languages: array,
    paid: string,
  }),
};

Resources.defaultProps = {
  initialValues: {
    category: [],
    q: '',
    languages: [],
    paid: '',
  },
};

       <Formik
          enableReinitialize
          initialValues={initialValues}
          onSubmit={(values, actions) => {
            handleSubmit(values, actions);
            actions.setSubmitting(true);
          }}
        >
          {({ isSubmitting }) => (
            <Form>
              <Field
                data-testid={RESOURCE_SEARCH}
                disabled={isSubmitting}
                type="search"
                name="q"
                label="Search Keywords"
                component={Input}
              />
              <div className={styles.formContainer}>
                <div className={styles.selectColumn}>
                  <Field
                    isDisabled={isSubmitting}
                    isMulti
                    placeholder="Start typing a category..."
                    label="By Category"
                    name="category"
                    options={allCategories}
                    component={Select}
                  />
                </div>

                <div className={styles.selectColumn}>
                  <Field
                    isDisabled={isSubmitting}
                    placeholder="Resource cost..."
                    label="By Cost"
                    name="paid"
                    options={costOptions}
                    component={Select}
                  />
                </div>

                <div className={styles.selectColumn}>
                  <Field
                    isDisabled={isSubmitting}
                    placeholder="Start typing a language..."
                    isMulti
                    label="By Language(s)"
                    name="languages"
                    options={allLanguages}
                    component={Select}
                  />
                </div>
              </div>
              <div className={styles.buttonGroup}>
                <Button disabled={isSubmitting} type="submit">
                  Search
                </Button>

                <Button disabled={isSubmitting} type="reset">
                  Reset
                </Button>
              </div>
            </Form>
          )}
        </Formik>
reactjs react-select formik
1个回答
0
投票

您是否尝试过将isClearable属性添加到单个值下拉菜单中?

        <Formik
          enableReinitialize
          initialValues={initialValues}
          onSubmit={(values, actions) => {
            handleSubmit(values, actions);
            actions.setSubmitting(true);
          }}
        >
          {({ isSubmitting }) => (
            <Form>
              //...Other Formik components

                <div className={styles.selectColumn}>
                  <Field
                    isClearable={true} // <-- added this
                    isDisabled={isSubmitting}
                    placeholder="Resource cost..."
                    label="By Cost"
                    name="paid"
                    options={costOptions}
                    component={Select}
                  />
                </div>

                <div className={styles.selectColumn}>
                  <Field
                    isDisabled={isSubmitting}
                    placeholder="Start typing a language..."
                    isMulti
                    label="By Language(s)"
                    name="languages"
                    options={allLanguages}
                    component={Select}
                  />
                </div>
              </div>
              <div className={styles.buttonGroup}>
                <Button disabled={isSubmitting} type="submit">
                  Search
                </Button>

                <Button disabled={isSubmitting} type="reset">
                  Reset
                </Button>
              </div>
            </Form>
          )}
        </Formik>
© www.soinside.com 2019 - 2024. All rights reserved.