раскрывающийся список не работает должным образом на небольшом экране мобильного устройства с использованием начальной загрузки реакции

Question

Использование пользователем выпадающего списка на маленьком экране (на мобильном устройстве) очень плохо при использовании выпадающего списка реакции начальной загрузки.

Есть ли какая-либо библиотека для этого случая, своего рода лист действий, который больше похож наизначально для реагирования.

Возможно ли интегрировать любую библиотеку, которая использует html, css, javascript, в React?

Answer 1

Хорошо, так что после обсуждения я думаю, что мы нашли идеальное решение для вашего вопроса.

Раскрывающийся лист действий

Вы можете использовать это как ->

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>
    )
  }
}

При этом пользовательский интерфейс будет выглядеть следующим образом: