So verwenden Sie die Taxonomie, um die Optionsknopffunktion zu implementieren

einführen

Optionsschaltflächen sind gängige Formularelemente, und Benutzer wählen häufig aus einer Reihe von Optionen über Optionsfelder. In diesem Artikel wird vorgestellt, wie die Optionsknopffunktion durch Taxonomie implementiert werden kann, um Entwicklern dabei zu helfen, Optionen effizienter zu organisieren und zu präsentieren.

Klassifizierungsmethode

Die Klassifizierung ist eine rekursive Abteilung und ein Erobereralgorithmus, der häufig verwendet wird, um große Datensätze in kleinere und überschaubare Sätze aufzuteilen. Bei der Implementierung von Optionsschaltflächen kann die Taxonomie uns Gruppenoptionen basierend auf Attributen zur Verbesserung der Benutzererfahrung helfen.

Schlüsselkonzepte:

• Attribut : Funktionen in Bezug auf Optionen. Zum Beispiel können Attribute in Filmstimmen ein Filmgenre sein (Komödie, Horror, Action usw.).
• Kategorie : Eine Sammlung von Optionen mit ähnlichen Attributen. Stellen Sie beispielsweise alle Comedy -Filme in eine Kategorie und Horrorfilme in eine andere Kategorie.
• Knoten : Ein Element im Klassifizierungsbaum, das ein Attribut und ein untergeordnetes Knoten oder Optionen enthält.
• Option : Ein bestimmtes Element, das der Benutzer auswählen kann, z. B. den Namen des Films.

erreichen

1. Erstellen Sie einen Klassifizierungsbaum

Der erste Schritt bei der Implementierung der Taxonomie zum Erstellen von Optionsfeldern besteht darin, den Klassifizierungsbaum zu erstellen. Hier ist ein Beispielklassifizierungsbaum:

 
// Erstellen Sie einen Klassifizierungsbaum
const tree = {
  label: "Filmtyp",
  children: [
    {
      label: "Horrorfilme",
      options: ["Die lebenden Toten kehren zurück", "Kettensäge", "Stiller Hügel"]
    },
    {
      label: "Comedy -Filme",
      options: ["Verabscheuungswürdiger Vater", "Drei Narren machen in Bollywood große Aufregung", "Made in Hongkong"]
    },
    {
      label: "Actionfilme",
      options: ["Mission unmöglich5", "Jedi Flucht", "Lass uns fallen！Papa"]
    }
  ]
};

Im obigen Klassifizierungsbaum repräsentiert der Stammknoten den Filmtyp. Jeder Knoten enthält eine Eigenschaft (z. B. einen Filmtyp) und eine Reihe von untergeordneten Knoten oder Optionen. Wenn ein Knoten keine untergeordneten Knoten hat, enthält er direkt Optionen.

2. Rendern Optionsknöpfe rendern

Als nächstes verwenden wir React, um Optionspunkte im Klassifizierungsbaum zu rendern. Hier sind die Beispielkomponenten der Implementierung:

 
import React from 'react';
<p>export default function RadioButtons({ tree }) {<br>
const renderNode = (node) => {<br>
if (node.options) {<br>
return node.options.map((option) => (<br>
<div key={option}><br>
<input type="radio" name={node.label} value={option} /><br>
<label htmlFor={option}>{option}</label><br>
</div><br>
));<br>
}<br>
return (<br>
<div key={node.label}><br>
<p><strong>{node.label}</strong></p><br>
{node.children.map((child) => renderNode(child))}<br>
</div><br>
);<br>
};</p>
<p>return <div>{renderNode(tree)}</div>;<br>
}<br>

In dieser Komponente rendern wir alle Knoten auf dem Klassifizierungsbaum und ihren Kindern oder Optionen rekursiv. Rendern Sie für jede Option ein Optionsfeld und ein Etikett mit dem Namen mit dem Wert der Option. Jeder Knoten macht einen Titel und seine Kinder.

Zusammenfassen

Durch die Implementierung von Optionsschaltflächen mit Taxonomie können wir Optionen effizienter organisieren und es den Benutzern erleichtern, sie zu verstehen und zu verwenden. Die Taxonomie gilt nicht nur für Optionsfelder, sondern kann auch in anderen Szenarien verwendet werden, in denen Daten erforderlich sind, z. B. Suchergebnisse, Artikel -Tags usw. Durch angemessene Klassifizierungs- und Rendernmethoden können die Benutzererfahrung erheblich verbessert werden.