如何使用react-bootstrap创建动态下拉列表 [英] How do I create a dynamic drop down list with react-bootstrap

问题描述

react-bootstrap网站中的示例代码显示了以下内容.我需要使用数组来驱动选项，但是我找不到要编译的示例.

The example code in the react-bootstrap site shows the following. I need to drive the options using an array, but I'm having trouble finding examples that will compile.

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

推荐答案

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

You can start with these two functions. The first will create your select options dynamically based on the props passed to the page. If they are mapped to the state then the select will recreate itself.

 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()函数即可根据某些约束(可以更改)构建并返回您的选项.

Then you will have this block of code inside render. You will pass a function reference to the onChange prop and everytime onChange is called the selected object will bind with that function automatically. And instead of manually writing your options you will just call the createSelectItems() function which will build and return your options based on some constraints (which can change).

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

这篇关于如何使用react-bootstrap创建动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！