亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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 關注
  • 90 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號