下拉列表在使用反应引导程序的小型移动屏幕上无法正常工作

Question

使用react bootstrap下拉列表，在小屏幕（移动设备）上显示下拉列表的用户体验非常糟糕。

对于这种情况，是否有任何类型的动作表，看起来更像是本机的反应动作。

是否可以在React中集成任何使用html，css，javascript的库？

Answer 1

好的，所以在讨论之后，我认为我们为您的问题找到了完美的解决方案。

Action Sheet Dropdown

您可以像 - ＆gt;一样使用它

import Actionsheet from 'react-actionsheet';
class App extends Component {

  state = {
    show: false
  }

  onClick = () => {
    const { show } = this.state
    this.setState({show: !show})
  }

  onRequestClose = () => {
    this.onClick()
  }

  render() {
    const { show } = this.state

    const tip = show ? '隐藏' : '显示'
    const menus = [{content: '点我'}, {content: '不要点我'}]

    return (
      <div>
        <button onClick={this.onClick}>{tip}</button>

        <Actionsheet show={show} menus={menus} onRequestClose={this.onRequestClose} />
      </div>
    )
  }
}

这会像这样呈现UI