Javascript 如何使用react引导创建动态下拉列表

react引导站点中的示例显示了以下内容。我需要使用数组驱动选项，但是我很难找到可以编译的示例

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

---

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

 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>

1号班轮应为：

import * as YourTypes from 'Constants/YourTypes';
....
<Input ...>
    {Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)}
</Input>

---

使用箭头函数绑定动态拖放

类BindDropDown扩展了React.Component{ 构造器{ 超级作物； 此.state={ 价值观：[ {name:'One'，id:1}， {name:'Two'，id:2}， {name:'Three'，id:3}， {name:'four'，id:4} ] }; } 渲染{ 让optionTemplate=this.state.values.mapv=> {v.name} ; 回来 选择您最喜欢的号码： {optionTemplate} ; } } ReactDOM.render , document.getElementById'root' ; 我的工作示例

this.countryData = [
    { value: 'USA', name: 'USA' },
    { value: 'CANADA', name: 'CANADA' }            
];

<select name="country" value={this.state.data.country}>
    {this.countryData.map((e, key) => {
        return <option key={key} value={e.value}>{e.name}</option>;
    })}
</select>

---

您需要添加映射键，否则会引发警告，因为每个道具都应该有一个唯一的键。代码修订如下：

---

让optionTemplate=this.state.values.mapv，index=>{v.name}

您可以通过地图创建动态选择选项

示例代码

---

我可以用它来做这件事。对于一个简单的场景来说，它看起来有点冗长，但我发布这篇文章是因为它将对某些人有所帮助

首先，我创建了一个组件，使其可重用

interface DynamicSelectProps {
    readonly id: string
    readonly options: any[]
    readonly defaultValue: string | null
    readonly disabled: boolean
    onSelectItem(item: any): any
    children?:React.ReactNode
}

export default function DynamicSelect({id, options, defaultValue, onSelectItem, disabled}: DynamicSelectProps) {

    const [selection, setSelection] = useState<any[]>([]);

    return <>
        <Typeahead
            labelKey={option => `${option.key}`}
            id={id}
            onChange={selected => {
                setSelection(selected)
                onSelectItem(selected)
            }}
            options={options}
            defaultInputValue={defaultValue || ""}
            placeholder="Search"
            selected={selection}
            disabled={disabled}
        />
    </>
}

用法

---

基本上，您需要做的就是映射数组。这将返回一个元素列表，您可以将其放置在表单中进行渲染

array.map((element, index) => <option key={index}>{element}</option>)

---

工作示例：

我认为省略我认为是数组索引的键，而改为设置更为正确。键应该是组件的id引用，如果说列表被重新排序，依赖数组索引可能会导致不一致。@Nathan-正确。这篇文章更详细…很好的解释@Theo，我有一个功能请求，在选择任何选项时，它应该在上面的输入框中附加相应选项的值，如果我开始键入，该选项应该打开。提前感谢？

// on component load, load this list of values
// or we can get this details from api call also    
const animalsList = [
{
    id: 1,
    value: 'Tiger'
}, {
    id: 2,
    value: 'Lion'
}, {
    id: 3,
    value: 'Dog'
}, {
    id: 4,
    value: 'Cat'
}
];

// generage select dropdown option list dynamically
function Options({ options }) {
    return (
        options.map(option => 
                    <option key={option.id} value={option.value}>                                   
                    {option.value}
                    </option>)
                   );
}

<select
name="animal"
className="form-control">
<Options options={animalsList} />
</select>

interface DynamicSelectProps {
    readonly id: string
    readonly options: any[]
    readonly defaultValue: string | null
    readonly disabled: boolean
    onSelectItem(item: any): any
    children?:React.ReactNode
}

export default function DynamicSelect({id, options, defaultValue, onSelectItem, disabled}: DynamicSelectProps) {

    const [selection, setSelection] = useState<any[]>([]);

    return <>
        <Typeahead
            labelKey={option => `${option.key}`}
            id={id}
            onChange={selected => {
                setSelection(selected)
                onSelectItem(selected)
            }}
            options={options}
            defaultInputValue={defaultValue || ""}
            placeholder="Search"
            selected={selection}
            disabled={disabled}
        />
    </>
}

function onSelection(selection: any) {
    console.log(selection)
    //handle selection
}

<div className="form-group">
    <DynamicSelect
        options={array.map(item => <option key={item} value={item}>{item}</option>)}
        id="search-typeahead"
        defaultValue={<default-value>}
        disabled={false}
        onSelectItem={onSelection}>
    </DynamicSelect>
</div>

array.map((element, index) => <option key={index}>{element}</option>)

import React, { useState } from "react";

const ExampleComponent = () => {
    const [options, setOptions] = useState(["option 1", "option 2", "option 3"]);

    return (
        <form>
            <select multiple>
            { options.map((element, index) => <option key={index}>{element}</option>) }
            </select>
            <button>Add</button>
        </form>
    );
}