我想从语义 UI 重新创建以下下拉菜单,其中使用UI React<label>
为下拉菜单插入a :
(https://semantic-ui.com/collections/form.html#dropdown)
这是我希望我的 React 应用程序创建的降价:
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
我正在努力通过语义 UI 的 React UI 实现来实现这一点。
我目前的尝试是这样的:
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
清楚地标记这一点非常重要。我在用户研究中发现,占位符仅作为问题提示就令人困惑。
有添加标签的文档,但是,它需要在下拉组件下嵌套子组件,这会干扰我对“选项”道具的使用。错误如下:
警告:失败的道具类型:道具
children
与Dropdown
道具冲突:options
,selection
。它们不能一起定义,选择一个或另一个
谢谢你,堆栈溢出!