Languages
[Edit]
DE

React - Auswahlliste

3 points
Created by:
Nikki
9950

In diesem Artikel wird gezeigt, wie man eine Auswahlliste in React hinzuf├╝gen kann.

Im folgenden Beispiel erstellt man mit hilfe des┬áReact.useRef-Hooks eine┬ácolorRef-Referenz auf eine Auswahlliste, aus der unsere Lieblingsfarbe ausgew├Ąhlt werden. In diesem Fall sind die Auswahlm├Âglichkeiten┬árot, gelb┬áoder┬áblau.

Das data-Objekt wird mit einer DOM-Referenz erstellt, die sich innerhalb der Funktion handleSubmit befindet und auf eine Auswahlliste verweist, die die Eigenschaft colorRef.current.value hat.

Schlie├člich zeigt die Funktion handleSubmit┬áin der Konsole das in JSON konvertiertes data-Objekt an.

// ONLINE-RUNNER:browser;

//import React from 'react';

const Form = () => {
  const colorRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      color: colorRef.current.value
    };
    const json = JSON.stringify(data);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          W├Ąhlen Sie Ihre Lieblingsfarbe:
          <select ref={colorRef}>
            <option value='red'>Rot</option>
            <option value='yellow'>Gelb</option>
            <option value='blue'>Blau</option>
          </select>
        </label>
      </div>
      <button type='submit'>Best├Ątigen</button>
    </form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

ReactJS (DE)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join