react bootstrap 站点中的示例code显示了以下内容.我需要使用数组驱动选项,但我很难找到可以编译的示例.
<Input type="select" label="Multiple Select" multiple>
<option value="select">select (multiple)</option>
<option value="other">...</option>
</Input>
react bootstrap 站点中的示例code显示了以下内容.我需要使用数组驱动选项,但我很难找到可以编译的示例.
<Input type="select" label="Multiple Select" multiple>
<option value="select">select (multiple)</option>
<option value="other">...</option>
</Input>
你可以从这两个函数开始.第一个选项将根据传递给页面的props 动态创建 Select 选项.如果它们被映射到该状态,则select将重新创建自身.
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时,所选对象将自动与该函数绑定.不需要手动编写选项,只需调用createSelectItems()函数,该函数将根据一些约束(可能会更改)生成并返回选项.
<Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple>
{this.createSelectItems()}
</Input>