如何在 React 中填充下拉菜單

Question

我正在嘗試使用testType的值填充我的下拉列表，但它沒有顯示出來。 有什么我想念的嗎？ 當我打印正在發送的數據時，它是正確的，但它沒有顯示在實際的下拉菜單中。 我不希望每次都填充它-僅當用戶單擊編輯條件時（而不是添加問題）。

我目前正在測試它的criteriaNum = 1所以下拉列表應該顯示testType = 'Visual Check' 。

這是我的 EditQuestionnaire.js：

export const PureEditQuestionnaire = ({
  criteriaNum,
  criteriaFields,
  image,
  isSaving,
  testType,
  onFieldChange,
  onClickSave,
  getInputValue,
  getDropdownValue,
}) => (
<>
<Header
  tabIndex="-1"
  isAddCriteria={!!criteriaNum}
  onClickSave={onClickSave}
  isSaving={isSaving}
  isOnTop={true}
/>
<CategoryContainer>
  <p>
    Fields with <span style={{ color: "red" }}>*</span> are required
  </p>

  {criteriaFields.map((field) => (
    <FieldContainer key={field.name}>
      <label htmlFor={field.name.replaceAll(" ", "-")} className="fields">
        {field.name}
      </label>

      {field.type === "input" ? (
        <TextField
          id={field.name.replaceAll(" ", "-")}
          value={getInputValue(field.name)}
          fullWidth={true}
          required={true}
          placeholder={"Enter the " + field.name}
          multiline={field.name === "Description" && true}
          rows={field.name === "Description" ? 4 : 0}
          onChange={(event) =>
            onFieldChange(field.name, event.target.value)
          }
        />
      ) : field.type === "dropdown" ? (
        <>
          {/* <label htmlFor={field.name}>Select the {" " + field.name}</label> */}
          <div id={field.name.replaceAll(" ", "-") + "-desc"}>
            Select the {" " + field.name}
          </div>
          <select
            id={field.name.replaceAll(" ", "-")}
            aria-describedby={field.name.replaceAll(" ", "-") + "-desc"}
            value={field}
            onChange={(event) =>
              onFieldChange(field.name, event.target.value)
            }
          >
            <option selected disabled>
              {/* Select a {" " + field.name} */}
            </option>
            {field.fields.map((field) => (
              <option key={field} value={field}>
                {field}
              </option>
            ))}
          </select>
        </>
      ) : (
        <ImageDropbox
          id={field.name.replaceAll(" ", "-")}
          image={image}
          imageFieldName={field.name}
          onImageChange={onFieldChange}
        />
      )}
    </FieldContainer>
  ))}
</CategoryContainer>

<CategoryContainer>
  <h1>Answers</h1>
  <AnswerTable />
</CategoryContainer>
<Header
  onClickSave={onClickSave}
  isSaving={isSaving}
  isOnTop={false}
  isAddCriteria={!!criteriaNum}
/>
</>
)

這是我從getDropdownValue導出的PureEditQuestionnaire ：

const getDropdownValue = (fieldName) => {
switch (fieldName) {
  case "Test Type":
    return criteriaValues.testType
  case "Capability":
    return criteriaValues.capability
  default:
    return ""
}
}

Answer 1

仔細檢查select和option元素的使用情況。 我也不確定field的 object 類型是什么。

希望這會有所幫助： 如何在反應 js 中使用 select 選項？