как сделать для цикла на реагировать-выбрать? - PullRequest
Новая
       13

как сделать для цикла на реагировать-выбрать?

0 голосов
/ 12 апреля 2019

Я делаю опцию выбора с помощьюact-select после этого Установка и использование пример кода. Был объект массива для хранения опции, подобной этой: 

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

Теперь я хочу сделать это динамически, чтобы хранить значение из других данных и заставить его повторяться в объекте.

как это: 

const options = [
      { value: flavor, label: flavor },
    ];

аромат для значения и метки является массивом. Допустим, в массиве хранятся данные примерно так: 

flavor = ['chocolate', 'strawberry', 'vanilla']

Таким образом, всякий раз, когда массив добавляет новое значение, объект массива выше также добавляет значение на итерации.

Итак, как сделать итерацию в этом ..?

или мне стоит подумать разобраться в компоненте ..? 

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

EDIT : результат, который мне нужен, - это добавление объекта в массив в соответствии со значениями массива, скажем, если у нас есть один данные внутри массива, тогда const options хранит данные следующим образом: 

const options = [
      { value: flavor, label: flavor },
    ];

тогда, если массив хранит 2 данных, тогда const options будет выглядеть так: 

const options = [
      { value: flavor, label: flavor },
      { value: flavor, label: flavor },
    ];

Цель этого заключается в том, чтобы опции выпадающего списка для выбора имели динамические значения.

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Я выяснил это следующим образом этот ответ , это ответ, который я хочу основать на своих вопросах: 

const options = [];
    obj = {}

    for(var i = 0; i < flavor.length; i++) {
      var obj = {};

      obj['value'] = flavor[i];
      obj['label'] = flavor[i];
      options.push(obj);
    }
0 голосов
/ 12 апреля 2019

Вы можете использовать функцию .map для динамического создания ваших опций:) 

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';


const options = [
    { value: 'flavor', label: 'flavor' },
    { value: 'yummy', label: 'yummy' },
    { value: 'red', label: 'red' },
    { value: 'green', label: 'green' },
    { value: 'yellow', label: 'yellow' },
];

class App extends Component {
    state = {
        selectedOption: 'None',
    }

    handleChange = ({ target }) => {
        this.setState({
            selectedOption: target.value,
        });
    }

    render = () => (
        <div>
            <span>{this.state.selectedOption}</span>
            <select
            value={this.state.selectedOption}
            onChange={this.handleChange}
            >
            {options.map(({ value, label }, index) => <option value={value} >{label}</option>)}
            </select>
        </div>
    );
}

render(<App />, document.getElementById('root'));

Рабочий пример здесь https://stackblitz.com/edit/react-select-example

...