我的網頁上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值中,可以嗎?
NextJS 和 Formik:選擇下拉菜單上的條件/動態呈現表單字段
慕桂英4014372
2022-11-11 17:00:20