如何使用react-bootstrap创建动态下拉列表

Question

react-bootstrap站点中的示例代码显示以下内容。我需要使用数组来驱动选项，但是在查找将要编译的示例时遇到了麻烦。

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>

Answer 1

您可以从这两个功能开始。第一个将基于传递到页面的道具动态创建您的选择选项。如果将它们映射到状态，则选择将自行重新创建。

 createSelectItems() {
     let items = [];         
     for (let i = 0; i <= this.props.maxValue; i++) {             
          items.push(<option key={i} value={i}>{i}</option>);   
          //here I will be creating my options dynamically based on
          //what props are currently passed to the parent component
     }
     return items;
 }

onDropdownSelected(e) {
    console.log("THE VAL", e.target.value);
    //here you will see the current selected value of the select input
}

然后，您将在render内部拥有此代码块。您将传递一个对onChange道具的函数引用，每次调用onChange时，所选对象将自动与该函数绑定。而且，您无需手动编写选项，而只需调用createSelectItems（）函数即可根据一些约束（可以更改）构建并返回您的选项。

  <Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple>
       {this.createSelectItems()}
  </Input>