我的网页上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 期和本文中发现了一个相关问题。所以我发现我的问题有点不同,但相关的解决方案。
这是一个片段@CodeSandbox和StackOverflow 的答案。
所以解决方案是基于原始表单的子组件,它是基于选择字段呈现的。(正是我需要的)。
不幸的是,我没有解决重复代码的问题,而是很好地构建代码并只呈现表单的必要部分。
添加回答
举报
0/150
提交
取消