如何根据下拉列表中选定的选项动态渲染其他文本字段？

Question

当前正在开发 NextJS UI，我正在尝试实现一项功能，其中应根据下拉菜单中所选的选项动态呈现其他文本字段。

这就是我想要实现的目标：

我有一个带有两个选项的下拉菜单。

• 当用户从下拉列表中选择特定选项时，我想动态显示特定于该选项的其他文本字段。
• 如果用户选择不同的选项或更改其选择，相应的文本字段应相应更新。 我已经设置了基本的下拉列表，并有一些用于动态渲染文本字段的代码，但在使其按预期工作方面我面临着一些挑战。选择后文本字段未显示

我尝试过使用 if else 语句和开关，但现在我使用三元运算符

这是我的代码（相关部分）

const [settlementAccountValue, setSettlementAccountValue] = useState(null); 

   const settlementAccountValues = [{ name: "Bank" }, { name: "Mobile" }];

   const handleSettlementAccountChange = (e) => {
   setSettlementAccountValue(e.value);
   // Update the settlementAccountValue state with the selected value
   };

   //inside the return
    <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                      <Controller
                        name="settlementAccount"
                        control={control}
                        rules={{ required: "Settlement Account is required." }}
                        render={({ field, fieldState }) => (
                          <div>
                            <label htmlFor="settlementAccount">
                              Settlement Account
                            </label>
                            <div className="mb-2"></div>
                            <Dropdown
                              value={settlementAccountValue}
                            
                              onChange={handleSettlementAccountChange
                              }
                              options={settlementAccountValues}
                              optionLabel="name"
                              id={field.name}
                              placeholder="Select Settlement Account"
                              className={classNames({
                                "p-invalid": fieldState.invalid,
                              })}
                             
                            >
                              {settlementAccountValue === "Mobile" ? (
                                <>
                                  <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                    <Controller
                                      name="contact"
                                      control={control}
                                      rules={{
                                        required: "Contact number is required.",
                                        pattern: {
                                          value: /^(9|7)(7|6|5)\d{7}$/i,
                                          message:
                                            "Invalid Contact number. E.g. 970111222 or 770111222",
                                        },
                                      }}
                                      render={({ field, fieldState }) => (
                                        <div className="field col-12 md:col-6">
                                          <label htmlFor="contact">
                                            Contact Number
                                          </label>
                                          <div className="p-inputgroup">
                                            <span className="p-inputgroup-addon">
                                              260
                                            </span>
                                            <InputMask
                                              id={field.name}
                                              {...field}
                                              className={classNames({
                                                "p-invalid": fieldState.invalid,
                                              })}
                                              mask="999999999"
                                            />
                                          </div>
                                          {getFormErrorMessage("contact")}
                                        </div>
                                      )}
                                    />
                                  </div>
                                </>
                              ) : (
                                <>
                                  <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                    <Controller
                                      name="bankName"
                                      control={control}
                                      rules={{
                                        required: "Bank Name is required.",
                                      }}
                                      render={({ field, fieldState }) => (
                                        <div>
                                          <label htmlFor="bankName">
                                            Bank Name
                                          </label>
                                          <div className="mb-2"></div>
                                          <InputText
                                            id={field.name}
                                            {...field}
                                            autoFocus
                                            className={classNames({
                                              "p-invalid": fieldState.invalid,
                                            })}
                                          />
                                          {getFormErrorMessage("bankName")}
                                        </div>
                                      )}
                                    />
                                  </div>
                                  <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                    <Controller
                                      name="bankAccount"
                                      control={control}
                                      rules={{
                                        required: "Bank Account Number is required.",
                                      }}
                                      render={({ field, fieldState }) => (
                                        <div>
                                          <label htmlFor="bankAccount">
                                          Bank Account Number
                                          </label>
                                          <div className="mb-2"></div>
                                          <InputText
                                            id={field.name}
                                            {...field}
                                            autoFocus
                                            className={classNames({
                                              "p-invalid": fieldState.invalid,
                                            })}
                                          />
                                          {getFormErrorMessage("bankAccount")}
                                        </div>
                                      )}
                                    />
                                  </div>
                                  <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                    <Controller
                                      name="bankAccountHolder"
                                      control={control}
                                      rules={{
                                        required: "Bank Account Holder is required.",
                                      }}
                                      render={({ field, fieldState }) => (
                                        <div>
                                          <label htmlFor="bankAccountHolder">
                                          Bank Account Holder
                                          </label>
                                          <div className="mb-2"></div>
                                          <InputText
                                            id={field.name}
                                            {...field}
                                            autoFocus
                                            className={classNames({
                                              "p-invalid": fieldState.invalid,
                                            })}
                                          />
                                          {getFormErrorMessage("bankAccountHolder")}
                                        </div>
                                      )}
                                    />
                                  </div>

                                  
                                </>
                              )}
                            </Dropdown>
                            {getFormErrorMessage("settlementAccount")}
                          </div>
                        )}
                      />
                    </div>

Answer 1

您可以尝试在基本选择时返回该 html 元素吗...

示例：

                              {settlementAccountValue === "Mobile" ? 
                            return (<>
                              <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                <Controller
                                  name="contact"
                                  control={control}
                                  rules={{
                                    required: "Contact number is required.",
                                    pattern: {
                                      value: /^(9|7)(7|6|5)\d{7}$/i,
                                      message:
                                        "Invalid Contact number. E.g. 970111222 or 770111222",
                                    },
                                  }}
                                  render={({ field, fieldState }) => (
                                    <div className="field col-12 md:col-6">
                                      <label htmlFor="contact">
                                        Contact Number
                                      </label>
                                      <div className="p-inputgroup">
                                        <span className="p-inputgroup-addon">
                                          260
                                        </span>
                                        <InputMask
                                          id={field.name}
                                          {...field}
                                          className={classNames({
                                            "p-invalid": fieldState.invalid,
                                          })}
                                          mask="999999999"
                                        />
                                      </div>
                                      {getFormErrorMessage("contact")}
                                    </div>
                                  )}
                                />
                              </div>
                            </>)
                           : return (
                            <>
                              <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                <Controller
                                  name="bankName"
                                  control={control}
                                  rules={{
                                    required: "Bank Name is required.",
                                  }}
                                  render={({ field, fieldState }) => (
                                    <div>
                                      <label htmlFor="bankName">
                                        Bank Name
                                      </label>
                                      <div className="mb-2"></div>
                                      <InputText
                                        id={field.name}
                                        {...field}
                                        autoFocus
                                        className={classNames({
                                          "p-invalid": fieldState.invalid,
                                        })}
                                      />
                                      {getFormErrorMessage("bankName")}
                                    </div>
                                  )}
                                />
                              </div>
                              <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                <Controller
                                  name="bankAccount"
                                  control={control}
                                  rules={{
                                    required: "Bank Account Number is required.",
                                  }}
                                  render={({ field, fieldState }) => (
                                    <div>
                                      <label htmlFor="bankAccount">
                                      Bank Account Number
                                      </label>
                                      <div className="mb-2"></div>
                                      <InputText
                                        id={field.name}
                                        {...field}
                                        autoFocus
                                        className={classNames({
                                          "p-invalid": fieldState.invalid,
                                        })}
                                      />
                                      {getFormErrorMessage("bankAccount")}
                                    </div>
                                  )}
                                />
                              </div>
                              <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                <Controller
                                  name="bankAccountHolder"
                                  control={control}
                                  rules={{
                                    required: "Bank Account Holder is required.",
                                  }}
                                  render={({ field, fieldState }) => (
                                    <div>
                                      <label htmlFor="bankAccountHolder">
                                      Bank Account Holder
                                      </label>
                                      <div className="mb-2"></div>
                                      <InputText
                                        id={field.name}
                                        {...field}
                                        autoFocus
                                        className={classNames({
                                          "p-invalid": fieldState.invalid,
                                        })}
                                      />
                                      {getFormErrorMessage("bankAccountHolder")}
                                    </div>
                                  )}
                                />
                              </div>

                              
                            </>)
                          }