Использование реакции-выбора десять раз на одной странице и сохранение состояния отдельно для каждого выбора - PullRequest
Новая
       106

Использование реакции-выбора десять раз на одной странице и сохранение состояния отдельно для каждого выбора

0 голосов
/ 14 июля 2020

Я использую React-select десять раз на одной странице из-за условия.

Условие: сначала будет выбран день, и пользователь выберет значения для этого дня. Я буду использовать карусель bootstrap, и пользователь снова выберет в любой день и выберет свои значения. Я использую response-select для одних и тех же значений во все дни, но теперь мне нужны отдельные значения для каждого дня. Как это сделать? Подходит ли для этого bootstrap карусель? Мне нужна помощь. Спасибо.

Это медицинское приложение, и доктор нажмет на понедельник, и ему будет показано время, и он выберет его на понедельник. Скажем, затем он нажимает на среду и выбирает отдельное время для среды. Я сохраню эти значения в массиве и покажу пациенту. 

class DoctorSelectDay extends Component {
state = { 
       options: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(obj => {
       return {value: `${obj}`, label: `${obj}`}
    }),
optionValues: [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
],
      open_id: [],
  };

changeHandler = e => {
    this.setState({ open_id: e ? e.map(x => x.value) : [] });
    console.log(this.state.open_id)
  };

render() {
    return (
          <div>
          <Select
            isMulti
            name="open_id"
            value={this.state.options.filter(item => this.state.open_id.includes(item.value))}
            onChange={this.changeHandler}
            options={this.state.options}
            className='select'
          /> 
          <button onClick={() =>{this.saveState()}} className='button-left'>Select Days</button>
          </div>
          )
    }
  }
export default DoctorSelectDay;

1 Ответ

0 голосов
/ 14 июля 2020

Думаю, не стоит использовать массив для сохранения данных. Вы пытаетесь получить данные о времени для каждого дня, это пример использования classi c для пары значений ключа, например {MON:'13:00-13:30'....}, поэтому я думаю, вы можете использовать 2 элемента select, один для значения дня и один для значений времени (надеюсь что я вас понял, но принципы те же), когда пользователь выбирает день, вы устанавливаете состояние для дневного значения setState({currentlySelectedDay:dayValue}) Затем пользователь выбирает время, и вы сохраняете состояние setState({daysTiming[this.state.currentlySelectedDay]=timingValue}) Индикация для скрытия / отображения элементов rhe значение currentSelectedDay, если оно пусто, показывает дни, если не показывает время. Кроме того, вы должны очистить дневное значение при сохранении времени. Надеюсь, это сработает для вас.

...