我如何在 React 应用程序中使用 <select> 形式？

Question

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

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

Answer 1

如果我理解正确并且你的类别设置在一个数组中，你可以使用 React 能够渲染 JSX 数组的事实来在 select 标签之间实现以下内容：

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

您可能需要更改它以适应您构建类别数组的方式，但只要它是一个数组，这样的事情就应该有效。每次你在这里看到大括号，我们都从 JSX 掉落到 JavaScript。如果有任何不明白的地方，请告诉我。

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

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

我如何在 React 应用程序中使用 <select> 形式？

How I can use <select> in form in react app?

forms

select

reactjs