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

Question

最初我在 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>

但我不知道在 react-toolbox Dropdown 中迭代我的数组的位置。我尝试了以下

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

Answer 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下拉组件。

所以，你可以这样做，

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

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