如何在react js中将数组数据绑定到dropdwon

Question

我在数组下面。

["Strong", "Good", "Satisfactory", "Weak", "Default", "None"]

我想将每个值绑定到下拉列表，这样用户就可以使用下拉控件从中选择任何一个。

我正在努力使用react js来做到这一点。我正在使用react boostrap下拉菜单。

你能帮忙吗。提前谢谢。我有下面的drodown代码。

<Dropdown id={id} key={id}>
<Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
array value 0
</Dropdown.Item>
<Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
array value 1
</Dropdown.Item>
<Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
array value 2
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>;

Answer 1

映射数组项并在JSX中呈现如下：

//var arr=["Strong", "Good", "Satisfactory", "Weak", "Default", "None"];
//map over the above array 
<Dropdown>
<Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
<Dropdown.Menu>
{arr.map(item => (
<DropdownItem>{item}</DropdownItem>
))}
</Dropdown.Menu>
</Dropdown>