Реагируй на ручку выбора выпадающего списка - PullRequest
0 голосов
/ 14 апреля 2020

Здесь, в моем приложении прореагировать, я использую таблицу реактив-ремешок . Внутри таблицы я использую реагировать-выбрать / асин c для раскрывающегося списка. Когда я набираю опции Reaction-select / asyn c, они должны появляться поверх таблицы, если у нее есть больше опций. Для более чем реагировать-выбирать / асинхронно c я определил еще один div и установил для него положение div .

<div style={this.state.isAsyncSelectOpen ? { position: 'absolute', width: '190px' }:{}}> 
  ....
</div>

Внутри div я написал asyn c select. enter image description here

Так что я могу получить вышеуказанный вывод. Но проблема заключается в горизонтальной прокрутке, когда asyn c select показывает опции в то время, когда прокручивается и весь div.

Вывод enter image description here

Ниже я дал свой код в качестве ссылок.

<div style={this.state.isAsyncSelectOpen ? { position: 'absolute', width: '190px' }:{}}>
    <Field
      name={`tests[${index}].testing_method`}
      component={AsyncSelectInput}
      selectedValue={this.state.testing[index].option}
      placeholder="Search"
      validate={testField}
      menuIsOpen={this.state.testing[index].menuIsOpen}
      isClearable={this.state.testing[index].testingClearable}
      openLoad={(input: string, callback: any) =>{
      this.onSelectOpen(input);
      this.loadTesting(input, callback, index)
        }}
      searchByName={(e: any) => this.searchTestingByName(e, index)}
      onMenuClose={()=>{
         this.setState({isAsyncSelectOpen: false});
      }}
      />
      <Field
      name={`tests[${index}].test_id`}
      component={ReduxFormInput}
      type="hidden"
     />                            
   </div>

И я установил стиль условно, когда asyn c выберите показывает свои параметры. На тот момент применялся единственный стиль.

Ниже я привел код, как я справлялся с изменяющимися стилями.

onSelectOpen = (inputValue:string)=>{
    if(size(inputValue) > 0){
      this.setState({isAsyncSelectOpen: true});
    }else{
      this.setState({isAsyncSelectOpen: false});
    }
  }

И попробовал другой подход, возможный дескриптор actstrap событие прокрутки таблицы. Но я не мог. Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 14 апреля 2020

Попробуйте эти реквизиты в react-select, если это полезно.

closeMenuOnScroll

Если true, закройте меню выбора, когда пользователь прокручивает документ / body.

menuShouldBlockScroll

boolean = false

Блокировать ли события прокрутки при открытом меню

Также см. Другие реквизиты и go через do c для более подробной информации:

https://react-select.com/props

...