回显输入内容

本课属于 Coddy React 学习旅程的“基础知识”单元。第 29 课，共 42 课。

输入文本存入状态后，只需用花括号就能在任何位置显示它。你输入时，问候语会跟着输入框变化：

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

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

三元表达式会在输入框为空时显示友好的提示，而不是尴尬的 Hello, !。这种输入加实时输出的模式随处可见，比如搜索框、注册表单和编辑器。

挑战

简单

创建一个实时问候语。

添加初始值为空字符串的 name 状态，并将输入框（id="name"）设为受控组件：使用 value 和 onChange。
当输入框为空时，段落（id="echo"）显示 Type your name；否则显示 Hello, ...! 和输入的名字（例如，输入 Ada → Hello, Ada!）。

亲手试试

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