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

Question

例子code在 react-bootstrap 站点中显示以下内容。我需要使用数组来驱动选项，但我找不到可以编译的示例。

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

Answer 1

可以从这两个函数入手。第一个将根据传递给页面的 Prop 动态创建您的选择选项。如果它们映射到状态，则选择将重新创建自己。

 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 Prop 传递一个函数引用，每次调用 onChange 时，所选对象将自动与该函数绑定(bind)。无需手动编写您的选项，您只需调用 createSelectItems() 函数，该函数将根据某些约束(可以更改)构建并返回您的选项。

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