Условный выбор опций для многоразового использования Выбрать компонент - PullRequest
Новая
       27

Условный выбор опций для многоразового использования Выбрать компонент

0 голосов
/ 01 августа 2020

Я использую response-select и создаю повторно используемый компонент Select, который будет условно выбирать, какой список параметров отображать в соответствующем элементе select, проверяя атрибут name.

Когда я кодирую он использует select html, options отрисовывает нормально. Я добавил элемент параметров, чтобы заполнить список. Это работает, но я также хотел бы попробовать создать его с помощью react-select Проблема в том, что параметры не отображаются, но правильный список, выбранный после выполнения условия, отображается, когда я console.log.

Любые мысли Что касается ошибки, которую я делаю при попытке с react-select?

Два импортированных списка данных: один - объект пары ключей и значений, а второй - массив отдельных значений.

Введите следующий код: 

import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import {countriesData1} from '../data/countries-data.js';
import {stateData3} from '../data/states-data.js';

class SelectComp extends React.Component {
  static propTypes = {
    selectCountry: PropTypes.string,
    handleChange: PropTypes.func
  }

  state = {
      countryList: countriesData1,
      stateList: stateData3,
    }
  
  render() {
    const {stateList, countryList} = this.state;

    const optionsCountry = Object.entries(countryList).map((entry, _) => {
      let key = entry[0]
      let value = entry[1]
      return <option key={key}
                     value={value}>
                       {value}
              </option>
     });

    const optionsState = stateList.map(data => {
      return <option key={data}
              value={data}>
                {data}
             </option>
    });

    let options;
    if(this.props.name === "Country") {
      options = optionsCountry;
    } else {
      options = optionsState;
    }
   
    return (
      <div>
        <Select name={`${this.props.name}`} 
              className={`select-options select-${this.props.name}`}
              onChange={this.props.handleChange}
              placeholder= {this.props.name === "Country" ? "Select Country" : "Select State"}
              options={options}
              />  

        <select name={`${this.props.name}`} 
                className={ `select-options select-${this.props.name}` }
                onChange={this.props.handleChange}>
                <option value=""
                        hidden> Select {this.props.name}</option>
                   {options}     
               {options} 
        </select>
      </div>
    )
  }
}

export default SelectComp;

Спасибо, Ли

1 Ответ

1 голос
/ 02 августа 2020

Вот как вы обычно настраиваете react-select: 

const options = [{
    value: '1',
    label: 'Option 1'
}, {
    value: '2',
    label: 'Option 2'
}]

 return <Select name="select-name" 
          onChange={handleChange}
          placeholder="placeholder"
          options={options}
          />

Учитывая API, например books, вы можете сопоставить результаты с такими параметрами: 

const options = books.map(book => ({ value: book.id, label: book.title })
...