使用 React bootstrap 下拉列表时,在小屏幕(移动设备)上使用下拉列表的用户体验非常糟糕。
有没有针对这种情况的库,某种看起来更像是 reactjs 原生的操作表。
是否可以在 React 中集成任何使用 html、css、javascript 的库?
最佳答案
好的,在讨论之后,我认为我们找到了您问题的完美解决方案。
你可以这样使用 ->
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
关于javascript - 使用 react Bootstrap 的下拉列表在小移动屏幕上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50389970/