完整教程：50天50个小项目 (React19 + Tailwindcss V4) ✨| RandomChoicePicker（标签生成）

  我们继续 50 个小项目挑战！——  RandomChoicePicker组件

仓库地址：https://gitee.com/hhm-hhm/50days50projects.git

构建一个简单的标签输入组件。用户可以在文本框中输入多个选项，并通过逗号分隔，组件会自动将其拆分成可视化的“标签”展示出来。

组件目标

• 接收用户输入的一段文本。
• 使用逗号 , 分割输入内容。
• 动态渲染为一组“标签”（Tag）。
• 使用 TailwindCSS 快速构建美观现代的 UI 界面。
• 提供清晰的交互反馈。

RandomChoicePicker.tsx 组件实现

import React, { useState, useEffect } from 'react'
const RandomChoicePicker: React.FC = () => {
    const [textareaText, setTextareaText] = useState('')
    const [tagList, setTagList] = useState([])
    // 每当 textareaText 变化时，自动分割标签
    useEffect(() => {
        const tags = textareaText
            .split(',')
            .map((item) => item.trim()) // 去除前后空格
            .filter((item) => item !== '') // 过滤空字符串
        setTagList(tags)
    }, [textareaText])
    return (
        

            

                

                    Enter all of the choices divided by a comma
                    (',').(输入所有选项，并用英文逗号,分隔)
                    

                    Press enter when you're done
                
                 setTextareaText(e.target.value)}
                />
                {tagList.length > 0 && (
                    <div className="mt-4 flex flex-wrap gap-2">
                        {tagList.map((item, index) => (
                            <div
                                key={`${item}-${index}`} // 使用 index 避免重复 key（因 item 可能重复）
                                className="rounded-2xl bg-amber-200 px-3 py-1 text-sm font-medium text-gray-800">
                                {item}
                            </div>
                        ))}
                    </div>
                )}
            </div>
            <div className="absolute right-20 bottom-10 text-red-500">CSDN@Hao_Harrision</div>
        </div>
    )
}
export default RandomChoicePicker</code></pre>
<h2>✅ 关键实现说明</h2><table><thead><tr><th>功能</th><th>Vue 实现</th><th>React + TS 实现</th></tr></thead><tbody><tr><td>双向绑定文本域</td><td><code>v-model="textareaText"</code></td><td><code>value + onChange</code> 控制</td></tr><tr><td>自动分割逗号内容</td><td><code>watchEffect</code> + <code>splitTag()</code></td><td><code>useEffect</code> 监听 <code>textareaText</code></td></tr><tr><td>标签渲染</td><td><code>v-for="item in tagList"</code></td><td><code>{tagList.map(...)}</code></td></tr><tr><td>空值过滤</td><td>无（原逻辑会保留空字符串）</td><td>✅ 添加 <code>.trim()</code> 和 <code>filter(item !== '')</code> 提升体验</td></tr></tbody></table><hr/><h2>️ 改进细节</h2><ol><li><p><strong>去重与清理</strong></p><ul><li>使用 <code>.trim()</code> 去除每个选项前后的空格（如 <code>" apple "</code> → <code>"apple"</code>）。</li><li>过滤掉空字符串，避免显示空白标签。</li></ul></li><li><p><strong>Key 策略</strong></p><ul><li>因用户可能输入重复项（如 <code>"A, A, B"</code>），不能仅用 <code>item</code> 作 key。</li><li>改为 <code>key={</code>item−{index}<code>}</code> 确保唯一性，避免 React 警告。</li></ul></li><li><p><strong>UI/UX 增强</strong></p><ul><li>添加 <code>resize-none</code> 禁止手动调整 textarea 大小（保持布局稳定）。</li><li>添加 <code>focus:ring</code> 提升交互反馈。</li><li>使用 <code>flex-wrap</code> 确保标签在小屏换行。</li><li>添加 <code>bg-gray-100</code> 背景色提升整体可读性。</li></ul></li><li><p><strong>类型安全</strong></p><ul><li><code>textareaText: string</code></li><li><code>tagList: string[]</code></li></ul></li></ol><hr/><h4> 注意事项</h4><ul><li>此组件目前<strong>只负责输入和解析</strong>，不包含“随机选择”逻辑（如抽一个标签）。如果你后续需要“Pick Random”功能，可以在此基础上加一个按钮调用： <pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code>const pickRandom = () => {
  if (tagList.length > 0) {
    const random = tagList[Math.floor(Math.random() * tagList.length)];
    alert(`Selected: ${random}`);
  }
};</code></pre> </li></ul><h2> TailwindCSS 样式重点讲解</h2><table align="center" border="1" cellpadding="1" cellspacing="1"><caption>
  TailwindCSS 样式说明
 </caption><tbody><tr><th style="text-align: center; vertical-align: middle;">类名</th><th style="text-align: center; vertical-align: middle;">作用</th></tr><tr><td style="text-align:center; vertical-align:middle"><code>flex</code>, <code>items-center</code>, <code>justify-center</code></td><td style="text-align:center; vertical-align:middle">居中布局整个容器</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>h-screen</code></td><td style="text-align:center; vertical-align:middle">容器高度为视口全高</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>rounded-2xl</code></td><td style="text-align:center; vertical-align:middle">圆角大小为 1rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>bg-gray-400</code>、<code>bg-gray-200</code>、<code>bg-amber-200</code></td><td style="text-align:center; vertical-align:middle">设置背景颜色</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>p-8</code>, <code>p-4</code>, <code>p-1</code></td><td style="text-align:center; vertical-align:middle">不同层级的内边距</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>my-4</code></td><td style="text-align:center; vertical-align:middle">上下外边距为 1rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>w-full</code></td><td style="text-align:center; vertical-align:middle">宽度为 100%</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>h-36</code></td><td style="text-align:center; vertical-align:middle">高度为 9rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>text-2xl</code></td><td style="text-align:center; vertical-align:middle">字体大小为 1.5rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>font-mono</code></td><td style="text-align:center; vertical-align:middle">使用等宽字体</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>gap-2</code></td><td style="text-align:center; vertical-align:middle">flex 子元素之间间隔为 0.5rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>h-8</code></td><td style="text-align:center; vertical-align:middle">高度为 2rem</td></tr><tr><td style="text-align:center; vertical-align:middle"><code>rounded-2xl</code></td><td style="text-align:center; vertical-align:middle">圆角为 1rem</td></tr></tbody></table><p>这些类名帮助我们快速构建出一个居中的响应式布局，并确保视觉上的一致性和美观性。</p><h2> 路由组件 + 常量定义</h2><p><code> router/index.tsx </code>中 <code>children数组中</code>添加子路由</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="language-TypeScript">{
    path: '/',
    element: <App />,
    children: [
       ...
       {
         path: '/RandomChoicePicker',
         lazy: () =>import('@/projects/RandomChoicePicker.tsx').then((mod) => ({
                        Component: mod.default,
           })),
       },
    ],
 },</code></pre>
<p>constants/index.tsx 添加组件预览常量<code></code></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important;"><code class="language-TypeScript">import demo13Imgfrom '@/assets/pic-demo/demo-13.png'
省略部分....
export const projectList: ProjectItem[] = [
    省略部分....
    {
        id: 13,
        title: 'Random Choice Picker',
        image: demo13Img,
        link: 'RandomChoicePicker',
    },
]</code></pre>
<h2> 小结</h2><p>作为表单组件的一部分，用于收集用户输入的多项数据。</p><h2> 明日预告： 我们将完成<code>AnimatedNavigation</code>组件，一个非常有意思的动画的导航组件！</h2><p><br/> 原文链接：<a href="https://blog.csdn.net/qq_44808710/article/details/148615314" title="https://blog.csdn.net/qq_44808710/article/details/148615314">https://blog.csdn.net/qq_44808710/article/details/148615314</a></p><blockquote><p>每天造一个轮子，码力暴涨不是梦！</p></blockquote></div>