如何迭代react-toolbox DropDown中的数组

时间:2017-05-30 17:14:35

标签: react-toolbox

最初我在reactjs中使用简单的html选择框,我迭代我的数组作为子元素中的道具

  <select onChange={this.getOccasion}>
  <option value="states">States</option>
  {
      this.props.holidays.map(function(holidays,i) {
      return <option key={i}
        value={holidays.state}>{holidays.state}</option>;
    })
  }
</select>

但是我不知道在reactor-dropbox Dropdown中我在哪里迭代我的数组。我试过了

  <Dropdown
  auto
  onChange={this.getOccasion}
  source={this.props.holidays}
  value={this.props.holidays.state}
/>

1 个答案:

答案 0 :(得分:1)

您需要将下拉列表source数组设置为某种格式。

const countries = [
  { value: 'EN-gb', label: 'England' },
  { value: 'ES-es', label: 'Spain'},
  { value: 'TH-th', label: 'Thailand' },
  { value: 'EN-en', label: 'USA'}
];

检查RT dropdown组件。

所以,你可以这样做,

const holidays = this.props.holidays.map(holiday => ({
  value: holiday.state,
  label: holiday.state
}));

<Dropdown
  auto
  onChange={this.getOccasion}
  source={holidays}
  value={this.state.someVariable}
/>