在 div 内打开一个反应选择下拉菜单正在推动同一个父级中的另一个 div

Question

我正在使用 react-select 并生成了一些下拉菜单。但是，当我单击顶部 div 时，它会将底部的 div 推到下面。我正在使用 flex 内联显示它们。有人可以帮我解决以下问题。非常感谢您的帮助！

1. 打开/关闭一个 div 不应影响另一个 div。展开的下拉菜单应覆盖按钮 div
2. 从一个下拉列表中选择一个选项也是从其他选项中选择

3. 有时不会点击下拉菜单

我对 CSS/React 很陌生。请帮我。下面是代码：

const customStyles = {
    control:  (provided, state)=> ({
      ...provided,
      width: 210,
      position: 'relative',
      top: 40,
      // height: 25,
      // minHeight: 10,
      // overflow:'hidden'
    }),
    menu: (provided, state) => ({
      ...provided,
      width: 210,
      position: 'relative',
      top: 40
    }),
    menulist: (provided, state) => ({
      ...provided,
      width: 210,
    }),
    option: (provided, state) => ({
      ...provided,
      width: 210,
      height: 24,
      minHeight: 15,
      paddingTop:0,
      fontSize: '0.8em',

    }),
    placeholder: (provided, state) => ({
      ...provided,
      fontSize: '0.8em',
      color: colourOptions[1].color,
      fontWeight: 400,
      // position: 'relative',
      // top: 2,
      overflow:'hidden'
    }),
    multiValue: (styles, { data }) => {
      const color = colourOptions[0].color;
      return {
        ...styles,
        backgroundColor: colourOptions[0].color
      };
    },
    multiValueLabel: (styles, { data }) => ({
      ...styles,
      color: 'white',
      height: 18,
      minHeight: 15,
      fontSize:12,
      paddingTop:0
    }),
    multiValueRemove: (styles, { data }) => ({
      ...styles,
      color: colourOptions[1].color,
      ':hover': {
        backgroundColor: colourOptions[0].color,
        color: 'white',
      },
    }),
    dropdownIndicator : (styles, { data }) => ({
      ...styles,
      color: colourOptions[1].color,
      size:6,
      ':hover': {
        color: colourOptions[0].color,
      },
    }),
  };

class DefectsContainer extends Component {
     state = {
            teams:  [{ value: 'a', label: 'Alpha' },
            { value: 'b', label: 'Beta' },
            { value: 'c', label: 'Gamma' }],
            selectedOption:null
        };

        handleChange = selectedOption => {
            this.setState(
              { selectedOption },
              () => console.log(`Option selected:`, this.state.selectedOption)
            );
          };


      render() {
        const { selectedOption } = this.state;

        return (
               <div className="defect-dashboard-main-div">    
                   <div className="defect-dashboard-container">     
                        <div className="filterContainer">
                            <div className="filterChildDiv">
                              <label className="filterHeader">Project</label>
                              <Select className="select-teams" closeMenuOnSelect={false} isMulti options={this.state.teams}
                                autosize={false} value={selectedOption} onChange={this.handleChange} styles={customStyles}
                                placeholder="Select Project(s)..." theme={theme => ({
                                  ...theme,
                                  borderRadius: 3,
                                  borderColor: colourOptions[0].color,
                                  colors: {
                                      ...theme.colors,
                                      primary25: 'hotpink'
                                  }
                                  })}
                              />
                            </div>

                            <div className="filterChildDiv">
                              <label className="filterHeader">Category</label>
                              <Select className="select-teams" closeMenuOnSelect={false} isMulti options={this.state.teams}
                                autosize={false} value={selectedOption} onChange={this.handleChange} styles={customStyles}
                                placeholder="Select Category..." theme={theme => ({
                                  ...theme,
                                  borderRadius: 3,
                                  borderColor: colourOptions[0].color,
                                  colors: {
                                      ...theme.colors,
                                      primary25: 'hotpink'
                                  }
                                  })}
                              />
                            </div>

....

我的 css 文件：

.filterContainer{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

.filterChildDiv{
    flex: 1;
    /* float: left; */
    margin-right: 20px;
}

.defect-dashboard-table-env-main{
    width:1400px!important;
    height: 1050px!important;
    position: absolute;
    top:40px;
    left:120px;

}

Answer 1

默认情况下，选择菜单的样式是绝对位置，这允许它通过从文档流中删除元素来覆盖其他元素。在您的自定义样式中，您将菜单位置设置为相对，因此当菜单打开并插入到文档流中时，其他相对定位的元素会移动。从 customStyles.menu 函数返回的对象中删除 position: relative 将解决此问题。