Как создать динамический раскрывающийся список с помощью react-bootstrap

Я совершенно новый, чтобы реагировать, поэтому я, вероятно, пропустил что-то элементарное. Пример кода на сайте react-bootstrap React-Bootstrap показывает следующее. Мне нужно управлять параметрами с помощью массива, но у меня возникли проблемы с поиском примеров компиляции.

<Input type="select" label="Multiple Select" multiple>
  <option value="select">select (multiple)</option>
  <option value="other">...</option>
</Input>
9
javascript react-bootstrap reactjs

5 ответов

Вы можете начать с этих двух функций. Первый создаст параметры выбора динамически на основе реквизита, переданного на страницу. Если они сопоставлены с состоянием, то select будет воссоздавать себя.

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

мой рабочий пример

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

1 лайнер будет:

import * as YourTypes from 'Constants/YourTypes';
....
<Input ...>
    {Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)}
</Input>

предполагая, что вы храните константы списка в отдельном файле (и вы должны, если они не загружены из веб-службы):

# YourTypes.js
export const MY_TYPE_1="My Type 1"
....
1

вам нужно добавить ключ для сопоставления, иначе он выдает предупреждение, потому что каждый реквизит должен иметь уникальный ключ.Код, пересмотренный ниже: пусть optionTemplate = это.государство.ценности.map ((v, index) = > ({v. name}));

1

bind динамическое падение с помощью функции стрелки.

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