0

首先，我想先声明一下，我对反应非常陌生。我对所有下拉菜单都使用 React-Select。有时我的网站可以托管在 IFrame 中。发生这种情况时，当我打开下拉菜单时，React-Select 会停留在 IFrame 中。我希望它表现得像一个原生的选择元素，如果可能的话，可以在 IFrame 之外。

构建选择组件的逻辑

import React, { Component } from 'react';
import Select from 'react-select';
import { connect } from 'react-redux';


import {
  SelectOptionContainer,
  SelectOptionLabelContainer,
  SelectOptionSelectContainer,
} from '../selectOption/selectOption.styles';

import { OptionSelectProps, OptionType  } from '../../props/propTypes';
import { customStyles } from './select.styles';
import { ChangeSelectedItem } from '../../redux/display/display.actions';

class SelectOption extends Component<OptionSelectProps, {}> {

  alertElement = (val: any): void => {
    this.props.setSelectedValue(val);
  }

  render() {
    const { displayName, options, index, setSelectedValue, selectedFontFamily, ...otherProps } = this.props;
    
    return (
      <SelectOptionContainer>
        <SelectOptionLabelContainer>
          <label style={{ gap: '50px', fontFamily: selectedFontFamily }}>{displayName}: </label>
        </SelectOptionLabelContainer>
        <SelectOptionSelectContainer>
          <Select
            {...otherProps}
            styles={customStyles(selectedFontFamily)}
            options={options}
            onChange={(data : any) => this.alertElement(data)}
            menuPosition={'absolute'}
            menuPlacement={'bottom'}
            menuShouldScrollIntoView={false}
          />
        </SelectOptionSelectContainer>
      </SelectOptionContainer>
    );
  }
}

const mapDispatchToProps = (dispatch : any) => ({
  setSelectedValue: (selectedValue : OptionType) => dispatch(ChangeSelectedItem(selectedValue))
});

export default connect(null, mapDispatchToProps)(SelectOption);

调用上述组件的部分

import React, { FC } from 'react';
import { DisplayReducer } from '../../props/propTypes';

import SelectOption from './selectOption.component';
import { SelectOptionItemContainer } from './selectOptionCollection.styles'

export interface SelectOptionCollectionProps extends DisplayReducer{
    isBurger: boolean;
}


const SelectOptionCollection: FC<SelectOptionCollectionProps> = 
    ({collection, selectedFontFamily, isBurger }) =>{
    
    let testArray: Array<number> = [];
    for(let i = 1; i <= 100; i++)
        testArray.push(i);
    
    return(
        <>
        <select id='testselect' >
         {   
            testArray.map(t =>
                 (
                    <option value={t}>{t}</option>
                )
            )
            
         }  
        </select>
            {
                Object.keys(collection).map((key, index) => {
                    if (!collection[key].options || collection[key].options.length <= 1)
                        return '';
                    const found = collection[key].options.find(o => o.selected);
            
                    collection[key].options.forEach( ot => ot.parent = collection[key])
                    return(
                        <SelectOptionItemContainer isBurger={isBurger} key={`SelectOptionItemContainer_${isBurger}`}>
                            <SelectOption displayName={collection[key].displayName}  
                                options={collection[key].options} 
                                index={index} 
                                key={`${collection[key].id}_${collection[key].playerPropertyName}`}
                                value={found ? found : null}
                                isOptionDisabled={(option: any) => option?.isDisabled ?? false}
                                selectedFontFamily={selectedFontFamily}  />
                        </SelectOptionItemContainer>);
                })
            }
        </>
    )
}

export default SelectOptionCollection;

构建上述部分的代码部分：

import React, { FunctionComponent } from 'react';
import {isMobileOnly} from 'react-device-detect';

import Burger from '../burger/burger.component';

//import LogoImage from '../../assets/JetStreamLogo.png'

import { HamburgerContainer, HeaderContainer, LogoContainer } from './header.styles'
import SelectOptionCollection from '../selectOption/selectOptionCollection.component';

import { DisplayReducer } from '../../props/propTypes';

const Header : FunctionComponent<DisplayReducer> = (props) => { 
    const {collection, match, selectedFontFamily} = props;

    return (<HeaderContainer>
        <LogoContainer to='/'>
            <img src='' style={{width: '170px', height: '75px'}} alt='Demo' />
        </LogoContainer>
        <HamburgerContainer>
        {
            match.params.event === undefined ?
                null :
            (isMobileOnly ?
                <Burger collection={collection} selectedFontFamily={selectedFontFamily} />
                : <SelectOptionCollection collection={collection} 
                    selectedFontFamily={selectedFontFamily} isBurger={false} />
            )

        }
        </HamburgerContainer>
            
        
    </HeaderContainer>)
}



export default Header;

以下是样式化的组件：

export const HamburgerContainer = styled.div`
width:  35%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
`;

export interface SelectOptionCollectionStyleProps {
    isBurger: boolean;
}

export const SelectOptionItemContainer = styled.div<SelectOptionCollectionStyleProps>`
padding-right: ${p => p.isBurger ? null : '20px'};
padding-bottom: ${p => p.isBurger ? '3px' : null};
`

const divMargin = css`
margin:2px
`;

export const SelectOptionContainer = styled.div`
/* width: 150px !important; */
padding: 5px 2px 0 2px;
/* padding-right: 5px; */
display: flex !important;
flex-direction: column !important;
font-size: 10pt;
`;

export const SelectOptionLabelContainer = styled.div`
color: white;
overflow: visible !important;
${divMargin}
`;

export const SelectOptionSelectContainer = styled.div`
color: black;
${divMargin}
`;

这是该站点示例的链接。如果您打开 url 并单击其中一个下拉菜单，它会停留在 IFrame 中并且不会出现。

我不是 CSS 最强大的，所以我希望有人可以帮助我解决这个问题。如果不是，我将回到我知道会起作用的传统 Select 标签。我在最左边有一个选择标签，所以你可以看到它也有效。我知道下拉列表显示两次的示例，但这只是因为我删除了一堆东西只专注于下拉列表。

4

0 回答 0