Wyświetlanie wpisanego tekstu

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 29 z 42.

Gdy tekst wejściowy znajduje się już w stanie, wyświetlenie go w dowolnym miejscu wymaga tylko nawiasów klamrowych. Powitanie, które zmienia się podczas pisania w polu:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

Operator trójargumentowy obsługuje pustą rubrykę, wyświetlając przyjazny komunikat zamiast niezręcznego Hello, !. Ten wzorzec łączący pole wprowadzania danych z wynikami wyświetlanymi na żywo jest stosowany w wyszukiwarkach, formularzach rejestracyjnych i edytorach.

Wyzwanie

Łatwy

Utwórz dynamiczne powitanie.

Dodaj stan name, którego początkową wartością jest pusty ciąg, i ustaw pole wejściowe (id="name") jako kontrolowane: value + onChange.
Akapit (id="echo") wyświetla Type your name, gdy pole jest puste, a w przeciwnym razie Hello, ...! z wpisanym imieniem (np. wpisanie Ada → Hello, Ada!).

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>