【问题标题】：React Web// iOS like select dropdown on mobileReact Web // iOS 就像移动设备上的选择下拉菜单
【发布时间】：2020-08-09 06:40:10
【问题描述】：

我有一个使用 React 构建的 Web 项目。当用户单击如下图所示的“类别图像按钮”时，我正在尝试打开类似选择下拉列表的 iOS。

我的期望

当我点击“分类图片按钮”时，应该会出现类似 iOS 的下拉选项。

我的代码逻辑

选择默认样式为'display: none'。
当点击“类别图片按钮”时，它会将“showWishSelect”状态更改为 true 并使用 select ref 触发选择点击操作。
一旦“showWishSelect”状态设置为真，选择的样式将设置为“显示：初始”。
然后出现选择选项。 [图 3]

问题

当我点击“分类图片按钮”时，[图片 1]

它将首先显示我不希望它显示的选择输入框。 [图片2]

然后我必须再次单击选择输入框才能打开下拉选择选项。 [图 3]

'selectRef.click()' 似乎没有被触发。

代码

state = {
    showWishSelect: false,
  };

onShowWishSelect = () => {
    this.setState({ ...this.state, showWishSelect: true });
    this.selectRef.click();
  };

return (
  <div className="mobile_filter_icon profile_filter_icon" onClick={this.onShowWishSelect}>
    <select
     size="4"
     style={{ display: this.state.showWishSelect ? 'initial' : 'none' }}
     ref={(select) => { this.selectRef = select; }}
     onChange={(e) => this.onCategory(e.target.value)}
     value={categoryId || 'current-wish'}
    >
     {allWishCategories.length
       ? allWishCategories.map((data, index) => (
         <option key={index} value={data.categoryId}>
           {data.name}
         </option>
       )): null}
     </select>
  </div>
)

/* CSS */
.mobile_filter_icon{ background:url("/.../web/2019/search/btn_filter_right_n.png") no-repeat; width:28px; height:27px; background-size: 28px 27px; }
.mobile_filter_icon.profile_filter_icon { position: absolute; right: 0px; border-radius: 1px; }

我尝试过的..

延迟 selectRef.click() 事件

onShowWishSelect = () => {
    this.setState({ ...this.state, showWishSelect: true });
    setTimeout(() => this.selectRef.click(), 1000);
  };

禁用默认选择样式并添加“类别图片”到选择标签。

<select
  size="4"
  className="mobile_filter_icon profile_filter_icon"
  onChange={(e) => this.onCategory(e.target.value)}
  value={categoryId || 'current-wish'}
>
  {allWishCategories.length
    ? allWishCategories.map((data, index) => (
      <option key={index} value={data.categoryId}>
         {data.name}
      </option>
    ))
   : null}
</select>


/* CSS */
.mobile_filter_icon.profile_filter_icon { position: absolute; right: 0px; border-radius: 1px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

图片1.分类按钮图片

图2. [bug] 选择输入框显示

图片 3. 类别下拉选项

提前感谢您的帮助！ :)

【问题讨论】：

标签： javascript ios reactjs select

【解决方案1】：

<select value={categoryId} className="mobile_filter_icon profile_filter_icon" onChange={e => this.onCategory(e.target.value)}>
    {allWishCategories.map((data, index) => (
       <option key={index} value={data.categoryId}>
          {data.name}
       </option>
    ))}
</select>

/* css */
.mobile_filter_icon{ background:url("//ccimage.hellomarket.com/web/2019/search/btn_filter_right_n.png") no-repeat;width:28px;height:27px; background-size: 28px 27px; }
.mobile_filter_icon.profile_filter_icon { position: absolute; right: 0px; border-radius: 1px; color: transparent;}
.mobile_filter_icon.profile_filter_icon > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: -9999px; }

【讨论】：