Здесь, в моем приложении прореагировать, я использую таблицу реактив-ремешок . Внутри таблицы я использую реагировать-выбрать / асин c для раскрывающегося списка. Когда я набираю опции Reaction-select / asyn c, они должны появляться поверх таблицы, если у нее есть больше опций. Для более чем реагировать-выбирать / асинхронно c я определил еще один div и установил для него положение div .
<div style={this.state.isAsyncSelectOpen ? { position: 'absolute', width: '190px' }:{}}>
....
</div>
Внутри div я написал asyn c select.
Так что я могу получить вышеуказанный вывод. Но проблема заключается в горизонтальной прокрутке, когда asyn c select показывает опции в то время, когда прокручивается и весь div.
Вывод
Ниже я дал свой код в качестве ссылок.
<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 событие прокрутки таблицы. Но я не мог. Кто-нибудь может мне помочь?