在 antd modal/react 中滚动时隐藏自动完成（建议）列表

Question

当我开始以简单的形式在输入字段上书写时，它会显示旧数据的自动建议列表（自动完成），当（窗口滚动）它消失并且一切正常。

但是当我将输入字段置于包含（其他滚动条）的 antd 模态中时，当我向上/向下滚动时，建议列表仍然出现。

我想到了一个解决方案，即向 antd 模态滚动器（ant-modal-wrapper）添加事件侦听器，因此当它被移动时，我关闭了自动建议功能。但我找不到向该滚动条添加侦听器的方法，因为它不是（window.scroll）。

我也尝试使用 jquery，比如

$(".ant-modal-wrapper").on("scroll", function() {      
    console.log("Scrolling");
  });

但没用。

我还在模态 div 中使用了 onScroll 属性，但没有用。

这是一张截图，可能有助于在 antd modal 中解释这个问题

suggestions list before scrolling

suggestions list after scrolling down

任何解决我的问题的建议或更好的解决方案都会有所帮助。谢谢

Answer 1

执行以下操作以隐藏模式内的自动完成选项。

• 维护一个状态，比如optionsOpen，并将其作为一个值分配给Autocomplete的open prop
• 在componentDidMount 中的scroll 上添加一个eventListener 并将状态更新为false。当用户滚动时，这将导致选项关闭。
• 移除 componentWillUnmount 中的 eventListener

Working demo is here

代码片段

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button } from "antd";
import { AutoComplete } from "antd";
const mockVal = (str, repeat = 1) => ({
  value: str.repeat(repeat)
});
class App extends React.Component {
  state = { visible: false, value: "", options: [], optionOpen: false };
  scrolListener = () => {
    if(this.state.optionOpen !== false && this.state.visible)
      this.setState({ optionOpen: false });
  };
  componentDidMount() {
    window.addEventListener("scroll", this.scrolListener, true);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.scrolListener);
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  onSearch = searchText => {
    this.setState({
      optionOpen: true,
      options: !searchText
        ? []
        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    });
  };

  onSelect = data => {
    console.log("onSelect", data);
  };

  onChange = data => {
    this.setState({ value: data });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <AutoComplete
            open={this.state.optionOpen}
            options={this.state.options}
            style={{
              width: 200
            }}
            onSelect={this.onSelect}
            onSearch={this.onSearch}
            placeholder="input here"
          />
          <br />
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));