无法点击自动完成的搜索内容

Question

在reactjs项目上工作，其中我有一个静态数据列表，该列表通过自动完成的reactjs组件显示。当它尝试单击搜索组件中的单个元素时，它与它后面的组件重叠。我该如何解决？这是我的情况。

下面是我的代码：

render() {
    console.log("",this.state.data);
    if (this.state.redirectToReferrer) {
      return <Redirect to={"/"} />;
    }

    return (
      <div className="row" id="Body">
        <div className="medium-12 columns">
          <a href="#" onClick={this.logout} className="logout">
            Logout
          </a>
          <div className="logoutautocomplete">
            
            <Autocomplete
                classNames={{ autocompleteContainer: "ac-container" }}
                value={this.state.value}
                inputProps={{ id: "states-autocomplete" }}
                wrapperStyle={{ position: "relative", display: "inline-block" }}
                items={getStocks()}
                getItemValue={item => item.name}
                shouldItemRender={matchStocks}
                onChange={(event, value) => this.setState({ value })}
                onSelect={value => this.setState({ value })}
                renderMenu={children => <div className="menuInput">{children}</div>}
                renderItem={(item, isHighlighted) => (
                  <div
                    className={`item ${
                      isHighlighted ? "item-highlighted" : ""
                    }`}
                    key={item.abbr}
                  >
                    {item.name}
                  </div>
                )}
              />
</div>

          <input
            type="submit"
            className="button success"
            value="Add Iteration"
            onClick={this.CreateIteration}
          />
          {this.state.showComponentCreate ? (
            <Redirect to={"/createIteration"} />
          ) : null}
        </div>
        <div class="split left">
          <UserFeed
            feedData={this.state.data}
            deleteFeed={this.deleteFeed}
            convertTime={this.convertTime}
            name={this.state.name}
            editFeed={this.editFeed}
            showJira={this.showJira}
            editfeed={this.editfeed}
          />
        </div>
        <div class="split right">
          <div className="people-you-might-know">
            <div className="row add-people-section-2">
              <div className="small-12 medium-10 columns about-people">
                <div className="about-people-author">
                  <p className="author-name">
                    {/* cdoe to get jira details*/}

                    <div>
                      {this.state.loading}
                      {this.state.jiradata.map((rowdata, i) => (
                        <div>
                          <div style={{ display: "inline" }}>
                            <b>MainJiraKey</b> : {rowdata.jirakey} Status:
                            <div
                              class={`${rowdata.jirastatus.substring(0, 2)}`}
                            >
                              {rowdata.jirastatus}
                            </div>
                          </div>
                          {typeof rowdata.subjira == "object" ? (
                            <div>
                              {rowdata.subjira.map((subrowdata, k) => (
                                <div
                                  style={{
                                    paddingLeft: "50px",
                                    lineHeight: "40px"
                                  }}
                                >
                                  <div style={{ display: "inline" }}>
                                    <b>SubJiraKey</b> : {subrowdata.JiraKey}{" "}
                                    Status:{" "}
                                    <div
                                      class={`${subrowdata.Status.substring(
                                        0,
                                        2
                                      )}`}
                                    >
                                      {subrowdata.Status}
                                    </div>
                                  </div>
                                </div>
                              ))}
                            </div>
                          ) : null}
                        </div>
                      ))}
                    </div>

                    <br />

                    {/* <TimeAgo date={this.props.convertTime(feedData.created)} /> */}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

Answer 1

您可以尝试调整容器的z-index：

.ac-container {
    z-index: 1
}

有关z-index的更详细说明，您可以检查this answer