Javascript 在使用withformik、react和typescript再次关闭和打开面板后，如何在输入div中保留搜索字符串？

我想在input div中显示搜索字符串，即使用户关闭面板并使用withformik、react和typescript再次打开它

我想做什么？

我有一个过滤按钮。当用户单击它时，它会打开一个面板，其中有搜索输入，在搜索输入下的clear按钮可清除搜索字符串

const Main = () => {
    const [filtersOpen, toggleFilters] = useToggle(false);
    const [name, setName] = React.useState<string | undefined>(undefined);
    
    const handleSetFilters = ({ nameField }: any) => {
        setName(isEmpty(nameField) ? undefined : nameField);
    };

    return (
         <MultiPanel
             leftPanelOpen={filtersOpen}
             onLeftPanelCloseClick={toggleFilters}
             leftPanelContent={
                 <Filters onSetFilters={handleSetFilters}/>
             }
         />
     )
}

const Filters = ((props: FormikProps<any> & any) => {
    const { values, handleChange, handleBlur, handleSubmit, resetForm } = props;

    return (
        <form onSubmit={handleSubmit}>
            <FormField label="Name" fieldId={'nameField'}>
                {({ meta: { touched, error } }: FieldProps) => (
                    <Input //**this is the search input**
                        id="nameField"
                        type="text"
                        placeholder="name"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.nameField}
                        name="nameField"
                    />
                )}
            </FormField>

            <div>
                {Object.values(values)
                    .map(isEmpty)
                    .some((filter: any) => filter === false) && (
                        <Button onClick={() => resetForm()}>Clear</Button>
                )}
            </div>
        </form>
    );
};

const EnhancedForm = compose(
    withFormik({
        mapPropsToValues: () => ({
            nameField: '',
        }),
        handleSubmit: (values, { setSubmitting, props }: any) => {
            setSubmitting(false);
            props.onSetFilters(values);
        },
    }),
    withAutoSave()
)(Filters);


export default EnhancedForm;

    
    

现在是这样的,

用户输入一些字符串说“hello”hello字符串出现在搜索输入中。单击“清除”按钮将清除搜索字符串

const Main = () => {
    const [filtersOpen, toggleFilters] = useToggle(false);
    const [name, setName] = React.useState<string | undefined>(undefined);
    
    const handleSetFilters = ({ nameField }: any) => {
        setName(isEmpty(nameField) ? undefined : nameField);
    };

    return (
         <MultiPanel
             leftPanelOpen={filtersOpen}
             onLeftPanelCloseClick={toggleFilters}
             leftPanelContent={
                 <Filters onSetFilters={handleSetFilters}/>
             }
         />
     )
}

const Filters = ((props: FormikProps<any> & any) => {
    const { values, handleChange, handleBlur, handleSubmit, resetForm } = props;

    return (
        <form onSubmit={handleSubmit}>
            <FormField label="Name" fieldId={'nameField'}>
                {({ meta: { touched, error } }: FieldProps) => (
                    <Input //**this is the search input**
                        id="nameField"
                        type="text"
                        placeholder="name"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.nameField}
                        name="nameField"
                    />
                )}
            </FormField>

            <div>
                {Object.values(values)
                    .map(isEmpty)
                    .some((filter: any) => filter === false) && (
                        <Button onClick={() => resetForm()}>Clear</Button>
                )}
            </div>
        </form>
    );
};

const EnhancedForm = compose(
    withFormik({
        mapPropsToValues: () => ({
            nameField: '',
        }),
        handleSubmit: (values, { setSubmitting, props }: any) => {
            setSubmitting(false);
            props.onSetFilters(values);
        },
    }),
    withAutoSave()
)(Filters);


export default EnhancedForm;

    
    

现在用户类型显示“world”并关闭面板，然后通过单击filter按钮再次打开面板，搜索字符串“world”不存在。表示搜索输入中的值为“”

我想做什么？

我希望搜索字符串即使在关闭面板后也能保留文本。意思是如果用户输入字符串“world”，则关闭面板->打开面板

搜索输入应具有带清除按钮的字符串“world”

我不知道如何使用formik。我是个新来的反应和适应的人。有人能帮我吗。谢谢

下面是我的代码，values.nameField在用户关闭和打开面板后为空字符串

我希望values.nameField具有搜索字符串

const Main = () => {
    const [filtersOpen, toggleFilters] = useToggle(false);
    const [name, setName] = React.useState<string | undefined>(undefined);
    
    const handleSetFilters = ({ nameField }: any) => {
        setName(isEmpty(nameField) ? undefined : nameField);
    };

    return (
         <MultiPanel
             leftPanelOpen={filtersOpen}
             onLeftPanelCloseClick={toggleFilters}
             leftPanelContent={
                 <Filters onSetFilters={handleSetFilters}/>
             }
         />
     )
}

const Filters = ((props: FormikProps<any> & any) => {
    const { values, handleChange, handleBlur, handleSubmit, resetForm } = props;

    return (
        <form onSubmit={handleSubmit}>
            <FormField label="Name" fieldId={'nameField'}>
                {({ meta: { touched, error } }: FieldProps) => (
                    <Input //**this is the search input**
                        id="nameField"
                        type="text"
                        placeholder="name"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.nameField}
                        name="nameField"
                    />
                )}
            </FormField>

            <div>
                {Object.values(values)
                    .map(isEmpty)
                    .some((filter: any) => filter === false) && (
                        <Button onClick={() => resetForm()}>Clear</Button>
                )}
            </div>
        </form>
    );
};

const EnhancedForm = compose(
    withFormik({
        mapPropsToValues: () => ({
            nameField: '',
        }),
        handleSubmit: (values, { setSubmitting, props }: any) => {
            setSubmitting(false);
            props.onSetFilters(values);
        },
    }),
    withAutoSave()
)(Filters);


export default EnhancedForm;

    
    

const Main=（）=>{
常量[filtersOpen，toggleFilters]=UseTokle（false）；
const[name，setName]=React.useState（未定义）；
常量handleSetFilters=（{nameField}:any）=>{
setName（isEmpty（nameField）？未定义：nameField）；
};
返回(
)
}
常量过滤器=（（道具：FormikProps&any）=>{
const{values，handleChange，handleBlur，handleSubmit，resetForm}=props；
返回(
{（{meta:{触碰，错误}}}:FieldProps）=>(
)}
{Object.values（值）
.map（isEmpty）
.some（（filter:any）=>filter==false）和(
resetForm（）}>清除
)}
);
};
常量增强形式=合成(
withFormik({
mapPropsToValues:（）=>({
名称字段：“”，
}),
handleSubmit：（值，{setSubmitting，props}:any）=>{
设置提交（假）；
道具。设置过滤器（值）；
},
}),
withAutoSave（）
)（过滤器）；
导出默认增强形式；