当我单击其中一项（输入元素）时，如何阻止 Select 组件关闭 - 反应 antd

Question

我正在使用antd(3.23.4) 。 我有一个Select组件，当我单击其中一个选项（输入元素）时，我想避免它关闭。 然而，已经成功避免关闭它，当我单击它时无法专注于 Input 元素。 我认为这是因为我将它包装在一个 div 上并在 div 上使用了preventDefault() - 当我单击 Input 元素时它立即停止。 我搜索了antd的github上的一些问题，但没有运气。 这是我的代码示例：

            <Select
              dropdownRender={menu => (
                <React.Fragment>
                   {menu}      
                   <div onMouseDown={e => e.preventDefault()}>
                       <Input type="number" key="others" addonBefore="Others: " /> 
                   </div>
                </React.Fragment>
                                        
                  )} >
                    <Option key="bar" value="bar">
                        bar
                    </Option>
                </Select>

这里的问题是我无法单击/聚焦输入。 这样我就可以输入了。

需要帮忙。 请指教。 提前谢谢那些会回答的人：）

Answer 1

我们在 html Select属性中的 select 组件（标签）中有一个size=""属性。 这可以确保选择框内的选项一次可见，所以你可以这样做......

<select
            id="select"
            name="catagory"
            onChange={(e) => handleChange(e)}
            onClick={() => addSize()}
          >
            *.....Your Options....*
</select>



const addSize = () => {
  const selectBox = document.getElementById("select");
  selectBox.addEventListener("click", selectBox.setAttribute("size", 10));
};