我如何在反应应用程序的表单中使用 <select>？答案

【问题标题】：How I can use <select> in form in react app?我如何在反应应用程序的表单中使用 <select>？
【发布时间】：2022-01-26 15:50:53
【问题描述】：

我是初学者。我想创建一个带有“选择”字段的表单，该字段将作为选项包含数据库中的类别列表。这是一个反应应用程序。该文件是一个 register.js 我用一个 for 循环在 .ejs 中制作它，但我不知道如何将它翻译成 js。谢谢你的回答。

    <select name="category">
    <% for(let i = 0; i < categories.length; i++) { %>
        <option value="<%=categories[i].Id%>"><%=categories[i].Name%></option>
    <% } %>
    </select>

【问题讨论】：

标签： reactjs forms select

【解决方案1】：

如果我理解正确并且您的类别是在数组中设置的，那么您可以使用 React 能够呈现 JSX 数组的事实在选择标签之间实现以下内容：

{categories.map(category => <option key={category.Id} value={category.Id}>{category.Name}</option>)}

您可能必须更改它以适应您构建类别数组的方式，但只要它是一个数组，这样的东西就可以工作。每次你在这里看到大括号时，我们都会从 JSX 进入 JavaScript。如果有什么不明白的地方，请告诉我。

编辑：请注意，正如 Carlos Lombardi 指出的那样，这一切都必须从一个 React 组件函数返回，该函数在应用程序中被调用为它自己的组件。

编辑 2：感谢 Peter J Langley 指出最好在此处使用密钥。如果您知道您的 Id 属性是唯一的，那么这似乎是您的键值的自然选择。

【讨论】：

...当然在 React 组件中 function MySelect() { return <select name="category">{... the code in the answer ...}</select> }
值得将 key 添加到 option 元素，以帮助 React 识别更改。
没关系！谢谢@康纳！您的解决方案有效。我用减速机。所以我做了一些小的调整。