在React表单中添加下拉菜单

Question

我正在实现一个房间预订系统。我想添加2-4个不同的房间类型，但我试着添加一个下拉菜单，这样你就可以从2-4个房间类型中选择，你不用自己写，我正在使用/遵循这个。我试着应用<Form.Select…>，那不工作。

我到处都找过了，但没有找到有用的东西。

"react": "^17.0.2",
"react-bootstrap": "^1.6.4",

下面是我的代码:

<Form.Row className="mb-lg-3">
<Form.Group as={Col} controlId="roomTypeSelection" lg="4" md="12">
<Form.Label>Room Type:<span className="text-danger">*</span></Form.Label>
<Form.Control
ref={manufacturerInputRef}
onChange={handleChange}
name="roomTypeSelection"
value={values.roomTypeSelection}
type="text"
placeholder="Type your desired room..."
isInvalid={!!errors.roomTypeSelection}
isValid={touched.roomTypeSelection && !errors.roomTypeSelection}
/>
<Form.Control.Feedback type="invalid">
{errors.roomTypeSelection}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>

我已经尝试实现(从网站，我已经链接到)到我的代码上面，但它不是一起工作，它是单独工作:

<Form.Select>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>

这给了我一个空白的页面。

我该如何做到这一点，并在表单内实现下拉菜单?如何形成。控件设置工作，我怎么能代替文本添加下拉列表，有一个关键字吗?

Answer 1

你正在使用React bootstrap在React表单中添加下拉菜单。要解决这个问题，可以使用这个标签。试试这个:

<form>
<label>
Room type:
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</label>
</form>