在 React / Ionic 5

问题描述

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

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 没有这方面的任何信息。

解决方法

默认值在 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>

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