为了账号安全,请及时绑定邮箱和手机立即绑定

NextJS 和 Formik:选择下拉菜单上的条件/动态呈现表单字段

NextJS 和 Formik:选择下拉菜单上的条件/动态呈现表单字段

慕桂英4014372 2022-11-11 17:00:20
我的网页上Next.js的条件渲染有问题。Formik所以我在我的页面上命名了一个数组commands,这很容易:const commands = [    {        value: 'launch',        display_name: 'LAUNCH ROCKET!',    },    {        value: 'delay_launch',        display_name: 'LAUNCH IN..',    },    {      ....list of elements, they are not API fetched!    }];我的页面上需要一个网络表单(组件)(基于Formik)该组件如下所示:<Container>    <Formik        initialValues={{ command: 'launch', arguments: 'test'}}        onSubmit={async (values, { setSubmitting }) => {            await setSubmitting(false);            await Router.push(`/${values.command}`);        }}    >    {({            values,            errors,            touched,            handleChange,            handleBlur,            handleSubmit,            /* and other goodies */        }) => (        <form onSubmit={handleSubmit} noValidate autoComplete="off">            <Grid container spacing={3} direction="row" justify="center" alignItems="center">                <Grid item xs={3}>                    <TextField                        name="command"                        select                        label="Select command"                        className={classes.dropdown}                        onChange={handleChange}                        onBlur={handleBlur}                        value={values.command}                        variant="outlined"                    >                        {commands.map((option) => (                            <MenuItem key={option.value} value={option.value}>                                {option.label}                            </MenuItem>                        ))}                    </TextField>                </Grid>它(应该)如何工作?当您在页面上选择下拉菜单时(以 Formik 的形式),它会呈现其他字段,具体取决于 select value。但是如何根据确定的选定值以我的形式呈现它?我想应该有类似的东西:Map.get(number),但我还没有找到任何例子,而且,我不知道渲染代码片段应该如何存储在数组中。如果我将它存储在一个string值中,可以吗?
查看完整描述

1 回答

?
一只萌萌小番薯

TA贡献1795条经验 获得超7个赞

我在 Formik 的 Github第 751 期本文中发现了一个相关问题。所以我发现我的问题有点不同,但相关的解决方案。

这是一个片段@CodeSandboxStackOverflow 的答案

所以解决方案是基于原始表单的子组件,它是基于选择字段呈现的。(正是我需要的)。

不幸的是,我没有解决重复代码的问题,而是很好地构建代码并只呈现表单的必要部分。


查看完整回答
反对 回复 2022-11-11
  • 1 回答
  • 0 关注
  • 69 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信