防止在选择输入框时关闭选择下拉菜单答案

【问题标题】：Prevent the closing of select dropdown on selecting input box防止在选择输入框时关闭选择下拉菜单
【发布时间】：2020-06-28 14:29:41
【问题描述】：

我正在使用 antd 选择组件并使用 dropdownRender 选项来制作自定义下拉菜单。我在下拉列表中有一个自动完成组件，但是单击输入框时选择组件关闭。如何防止关闭事件。我的代码在链接https://codesandbox.io/s/busy-chatelet-ps907?file=/index.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Icon, Divider, AutoComplete, Input } from "antd";

const { Option } = Select;
const dataSource = ["Burns Bay Road", "Downing Street", "Wall Street"];

class App extends React.Component {
  state = {
    items: ["jack", "lucy"]
  };
  render() {
    const { items } = this.state;
    return (
      <Select
        style={{ width: 240 }}
        placeholder="custom dropdown render"
        dropdownRender={menu => (
          <div>
            {menu}
            <Divider style={{ margin: "4px 0" }} />
            <div
              style={{ padding: "4px 8px", cursor: "pointer" }}
              onMouseDown={e => e.preventDefault()}
            >
              Locations
              <AutoComplete
                style={{ width: 200 }}
                dataSource={dataSource}
                placeholder="try to type `b`"
                filterOption={(inputValue, option) =>
                  option.props.children
                    .toUpperCase()
                    .indexOf(inputValue.toUpperCase()) !== -1
                }
              >
                <Input
                  suffix={
                    <Icon type="search" className="certain-category-icon" />
                  }
                />
              </AutoComplete>
            </div>
          </div>
        )}
      >
        {items.map(item => (
          <Option key={item}>{item}</Option>
        ))}
      </Select>
    );
  }
}

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

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

您使用的是旧版本的antd，因此您面临选择关闭的问题。

升级到 4.x 版本，应该可以了。 Icons 在新版本中也发生了变化，所以请使用最新的组件。

See here working demo - 单击并输入输入时选择不会关闭

【讨论】：