在 React / Ionic 5 中设置 ion-select 的默认值

Question

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

，但我需要在 React 中执行此操作。

这是我的 select 代码：

    <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>

我想在页面加载时将此 select 的默认值设置为 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>

另请注意，以防万一您还没有发现它，通常有助于查看右上角所提供示例的代码，您可以通过单击“查看源代码”来执行此操作。

在 React / Ionic 5 中设置 ion-select 的默认值

Set default value of ion-select in React / Ionic 5

ionic-framework

ionic-react

ionic5