私は全く新しい反応がありますので、何か要素がないかもしれません。反応ブートストラップサイトReact-Bootstrapのサンプルコードは、次のとおりです。私は配列を使用してオプションを駆動する必要がありますが、コンパイルするサンプルを見つけるのが難しいです。反応ブートストラップを使って動的なドロップダウンリストを作成するにはどうすればいいですか
<Input type="select" label="Multiple Select" multiple>
<option value="select">select (multiple)</option>
<option value="other">...</option>
</Input>
これらの2つの機能から始めることができます。最初は、ページに渡された小道具に基づいて選択オプションを動的に作成します。それらが状態にマップされている場合、選択はそれ自身を再作成します。
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
}
次に、このコードブロックをレンダリングの内側に配置します。 onChange propに関数リファレンスを渡し、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>
（これらは、Webサービスからダウンロードしていない限り、あなたがすべき）あなたが別のファイルにリスト定数を保存すると仮定：
# YourTypes.js
export const MY_TYPE_1="My Type 1"
....
矢印機能を使用してダイナミックドロップをバインドします。あなたはマッピング用のキーを追加する必要が
class BindDropDown extends React.Component {
constructor(props) {
super(props);
this.state = {
values: [
{ name: 'One', id: 1 },
{ name: 'Two', id: 2 },
{ name: 'Three', id: 3 },
{ name: 'four', id: 4 }
]
};
}
render() {
let optionTemplate = this.state.values.map(v => (
<option value={v.id}>{v.name}</option>
));
return (
<label>
Pick your favorite Number:
<select value={this.state.value} onChange={this.handleChange}>
{optionTemplate}
</select>
</label>
);
}
}
ReactDOM.render(
<BindDropDown />,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>私の作業例
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>
各小道具がユニークkey.Codeは以下の改訂ているはずですので、それ以外の場合は警告をスローします： optionTemplateをしましょう= this.state.values.map（（v、index）=>（{v.name}））;
ありがとうございました。 – JohnL
npおかげでそれは助けてうれしい！ – Theo
@JohnLチェックマークをクリックして正しい答えをマークしてください:-) – FakeRainBrigand