Как использовать массив строк в качестве опций в реакции выбора - PullRequest
Новая
       30

Как использовать массив строк в качестве опций в реакции выбора

0 голосов
/ 04 февраля 2019

Я новичок в react.Я использую react select для выбора.Теперь у меня есть следующее jsx

div className="col-md-4 d-flex align-items-center" style={borderClass}>
                <label className="mb-0 font-weight-bold" style={labelFont}>
                  Technology
                                </label>
                <Select
                  styles={styles}
                  options={this.props.technology}
                  placeholder="None Selected"
                />
              </div>


const mapStateToProps = (state) => {
  return {
    technology : state.CreateJob.technology,
    userCompany: state.CreateJob.userCompany
  }
}

, которое исходит от редуктора в качестве опоры.Теперь данные, которые я получаю, выглядят так: 

['a', 'b', 'c']

Итак, как я могу использовать это как опцию в рендере.Кто-нибудь может мне с этим помочь ?Благодаря. * * 1010

Ответы [ 5 ]

0 голосов
/ 04 февраля 2019

React-Select ожидает массив объектов для параметров в этом формате: 

[..., { value: 'optionValue', label: 'optionLabel' }, ...]

Свойство метки отображается пользователю, и значение будет отправлено на сервер при отправке формы.

Вам необходимо создать массив в заданном формате из массива, полученного из хранилища резервов. 

...
render(){
    const { technology } = this.props;
    const rsOptions = technology.map(x => {label: x, value: x});
    return (
        <div className="col-md-4 d-flex align-items-center" style={borderClass}>
            <label className="mb-0 font-weight-bold" style={labelFont}>Technology</label>
                <Select
                    styles={styles}
                    options={rsOptions}
                    defaultValue={{label: 'abcd', value: 'abcd'}}
                    // value={{label: 'abcd', value: 'abcd'}}  // use value instead of defaultValue if its an controlled input
                    // you can also use an object from your array by index
                    // defaultValue={rsOptions[0]}
                    // or you can use find in your array
                    // defaultValue={rsOptions.find(x => x.value === 'abcd)}
                    placeholder="None Selected"
                />
          </div>
    );
}
...
0 голосов
/ 04 февраля 2019

Вы должны повторно сопоставить ваш массив строк с массивом объектов, реагировать-выберите принять этот формат для опций опоры.

[{ value: 'your value', label: 'your label' }]

<Select options={this.props.technology.map(t => ({ value: t, label: t})) } />

Оформить официальные документы здесь !

0 голосов
/ 04 февраля 2019

Вы можете отобразить список следующим образом: 

var array1 = ['a', 'b', 'c'];
var technologyList = [];
array1.forEach(function(element) {
    technologyList.push({ label:element, value: element })
});

И использовать его: 

<Select options={ technologyList } />
0 голосов
/ 04 февраля 2019

Реагирует на выбор ожидаемых опций как массив объектов со значением свойства и меткой 

 <Select
   styles={styles}
   options={this.props.technology.map(t=>({value: t, label: t}))}
   placeholder="None Selected"
 />
0 голосов
/ 04 февраля 2019

вам нужно использовать карту для обхода массива и визуализации опции для
рендеринга каждого фрагмента массива. 

<select className="form-control" value={currentValue} onChange={onChange}>
            <option value="">
                Select one...
            </option>
            {array.map(text,i => (
                <option key={i} value={text}>
                    {text}
                </option>
            ))}
        </select>
...