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

Question

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

  <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>

但是我不知道在react-toolbox下拉菜单中在哪里迭代我的数组。

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

Answer 1

您需要将dropdown 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}
/>