我对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>
您是否尝试过将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>