Zum Hauptinhalt springen

Optionsfeldgruppe

Optionsfeldgruppe in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponenten RadioGroup und Radio verwenden können.

Einfache Optionsfeldgruppe​

Radio kann nicht allein oder außerhalb des Kontexts von RadioGroup verwendet werden. RadioGroup sollte nur Radio-Komponenten als untergeordnete Elemente erhalten. Die label-Eigenschaft ist in beiden Komponenten obligatorisch und die value-Eigenschaft ist nur für die Radio-Komponente erforderlich.

<RadioGroup label="This is a group">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2"
    value="2"
  />
</RadioGroup>

Deaktivierte Option vs. deaktivierte Optionsfeldgruppe​

Beide Komponenten stellen eine disabled-Eigenschaft bereit. Wenn sie jedoch auf true der RadioGroup-Stufe festgelegt ist, überschreibt sie jede Deaktivierungskonfiguration auf der Radio-Stufe. Wenn es eine disabled={false}-Eigenschaftseinstellung unter den Radio-Optionen gibt, RadioGroup sie jedoch auf disabled={true} festlegt, sind alle Optionen deaktiviert.

<RadioGroup
  label="This is a group"
  disabled={true}>
  <Radio
    label="option 1"
    value="1"
    disabled={false}
  />
  <Radio
    label="option 2"
    value="2"
    disabled={false}
  />
</RadioGroup>

Vordefinierte Option​

Sie können festlegen, welche Option anfänglich ausgewählt wird, indem Sie die value-Eigenschaft an die initialValue-Eigenschaft von RadioGroup übergeben.

<RadioGroup
  label="This is a group with second option selected initially"
  initialValue="2">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2 is initially selected"
    value="2"
  />
</RadioGroup>

Horizontale Gruppe​

Die RadioGroup-Komponente ermöglicht die Anzeige von Optionen in horizontaler Verteilung, indem Sie die horizontal-Eigenschaft auf true setzen.

<RadioGroup
  label="This is a group"
  horizontal={true}>
  <Radio
    label="option 1"
    value="1"
    disabled={false}
  />
  <Radio
    label="option 2"
    value="2"
    disabled={false}
  />
</RadioGroup>

Validierungen von Optionsgruppen​

Die RadioGroup-Komponente stellt keine spezielle Validierungslogik zur Verfügung, bietet aber die Möglichkeit, die Validierung durch den Entwickler einzubeziehen und die stateMessages-Eigenschaft zur Anzeige der erforderlichen Fehlermeldung zu verwenden.

Dies ist ein Beispiel für die Handhabung der Validierung, wenn das onChange-Ereignis ausgelöst wird.

export function RadioValidation() {
  const [groupValidationMessages, setGroupValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    setGroupValidationMessages({});

    if (newValue == '1') {
      setGroupValidationMessages({
        error: ['Only second option can be marked'],
      });
    }
  }, []);

  return (
    <RadioGroup
      label="Do not select the forbidden option"
      onChange={onChange}
      stateMessages={groupValidationMessages}>
      <Radio
        label="Do not select the forbidden option"
        value="1"
      />
      <Radio
        label="This option can be selected"
        value="2"
      />
    </RadioGroup>
  );
}

Kontrollierte Eingabe​

RadioGroup weist eine value-Eigenschaft auf, die für das Szenario der kontrollierten Komponenten verwendet werden kann:

export function RadioControlled() {
  const [updatedValue, setNewValue] = useState('first given value');

  const onChange = (e, newValue) => {
    setNewValue(newValue.value);
  };

  return (
    <div>
      <Select
        label="Choose a value to be assigned"
        secondaryLabel="This value will be the option chosen below"
        onChange={onChange}>
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
            value: '1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
            value: '2',
          }}
        />
      </Select>
      <br />
      <RadioGroup
        label="Changes with the above"
        value={updatedValue}>
        <Radio
          label="Option 1"
          value="1"
          disabled={true}
        />
        <Radio
          label="Option 2"
          value="2"
          disabled={true}
        />
      </RadioGroup>
    </div>
  );
}

Verwendung von ref zur Festlegung des Fokus​

RadioGroup und bestimmte andere Eingaben ermöglichen es Ihnen, über eine ref-Eigenschaft auf einige native Verhaltensweisen zuzugreifen. Es werden jedoch nur einige Funktionen verfügbar gemacht. In diesem Fall wird beim Klicken auf die Schaltfläche automatisch der Fokus auf die darunter liegende Eingabe gesetzt.

<RadioGroup
  label="This is a group with second option selected initially"
  initialValue="2">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2 is initially selected"
    value="2"
  />
</RadioGroup>