在 React / Ionic 5 中设置离子选择的默认值

Question

我使用 Ionic 5 创建了一个 React 应用程序，我想设置表单中显示的选择元素的默认值。

This SO question is all about Angular，但我需要在 React 中执行此操作。

这是我的选择代码：

    <IonSelect id="category" name="group" ref={register}>
      <IonSelectOption key="noGroup" value="noGroup">No group</IonSelectOption>
      <IonSelectOption key="addTerm" value="addTerm">Add a group</IonSelectOption>
      {
        termList.map((item) => (
          <IonSelectOption key={item.id} value={item.id}>{item.name}</IonSelectOption>
        ))
      }
    </IonSelect>

我想在页面加载时将此选择的默认值设置为noGroup。我该怎么做？

ion-select documentation 没有这方面的任何信息。

Answer 1

IonSelect 标签中的默认值是这样指定的：

  <IonSelect id="category" name="group" ref={register} value={noGroup}>

您可以在文档中看到它：

        <IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
              <IonSelectOption value="brown">Brown</IonSelectOption>
              <IonSelectOption value="blonde">Blonde</IonSelectOption>
              <IonSelectOption value="black">Black</IonSelectOption>
              <IonSelectOption value="red">Red</IonSelectOption>
            </IonSelect>

另外作为一个附注，以防万一您还没有发现它，通常有助于在右上角查看所提供示例的代码，您可以通过单击查看源代码来做到这一点。