web-dev-qa-db-ja.com

react-bootstrapを使用して動的ドロップダウンリストを作成するにはどうすればよいですか

React-bootstrapサイトの例 code は以下を示しています。配列を使用してオプションを操作する必要がありますが、コンパイルされる例を見つけるのに問題があります。

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>
javascriptreactjsreact-bootstrap
14
JohnL

これらの2つの機能から始めることができます。 1つ目は、ページに渡された小道具に基づいて動的に選択オプションを作成します。それらが状態にマップされている場合、選択はそれ自体を再作成します。

 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プロップに関数参照を渡し、onChangeが呼び出されるたびに、選択されたオブジェクトがその関数に自動的にバインドされます。オプションを手動で記述する代わりに、createSelectItems（）関数を呼び出すだけで、いくつかの制約（変更可能）に基づいてオプションを作成して返します。

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

私の作業例

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>
11
dev-siberia

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"
....
2
Jjang

マッピング用のキーを追加する必要があります。そうしないと、各小道具に一意のキーが必要になるため、警告がスローされます。コードは以下のように修正されます。let optionTemplate = this.state.values.map（（v、index）=>（{v.name}）） ;

2
Jathin jain
// 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>
1
Vigneshwaran Chandrasekaran

Map（）で動的選択オプションを作成できます

コード例

return (
    <select className="form-control"
            value={this.state.value}
            onChange={event => this.setState({selectedMsgTemplate: event.target.value})}>
        {
            templates.map(msgTemplate => {
                return (
                    <option key={msgTemplate.id} value={msgTemplate.text}>
                        Select one...
                    </option>
                )
            })
        }
    </select>
)
  </label>
);
1
Rizo

矢印関数を使用して動的ドロップをバインドします。

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>
0
Awais Asghar