React Web // iOS как выпадающий список на мобильном телефоне

Question

У меня есть веб-проект, созданный с помощью React. Я пытаюсь открыть выпадающий список iOS, когда пользователь нажимает «кнопку изображения категории», как на изображениях ниже.

Что я ожидаю

Когда я нажимаю 'кнопку с изображением категории', должны появиться iOS опции, подобные выпадающим.

Мой код logi c

1. выберите стиль по умолчанию «display: none».

2. при нажатии кнопки «изображение категории» будет изменено состояние «showWishSelect» на true и триггер действие выбора клика с использованием выбора ref.

3. после того, как состояние 'showWishSelect' установлено в значение true, стиль выбора будет установлен в 'display: initial'.
4. , затем выберите варианты появляются. [изображение 3]

выпуск

Когда я нажимаю 'кнопку с изображением категории', [изображение 1]

будет отображаться окно выбора, которое я выбираю не хочу, чтобы это было показано в первую очередь. [изображение 2]

затем я должен снова щелкнуть поле ввода, чтобы открыть раскрывающиеся меню выбора. [image 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; }

То, что я пробовал ..

1. задержка события 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. Отображается окно выбора [ошибка]

изображение 3. Параметры раскрывающегося списка категорий

Спасибо за вашу помощь заранее !! :)

Answer 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; }