随Onsen一起使用的React中的Dropdown？
在React中，Dropdown是一个常用的UI组件，用于创建下拉菜单或下拉选择框。它通常用于用户界面中的表单或导航栏中。
Dropdown组件的主要特点包括：
- 概念：Dropdown是一个可展开的菜单，用户可以通过点击或悬停来打开或关闭菜单项。
- 分类：Dropdown可以根据使用场景的不同进行分类，例如单选下拉框、多选下拉框、级联下拉框等。
- 优势：Dropdown组件提供了用户友好的交互方式，可以节省页面空间，同时提供了更好的用户体验。
- 应用场景：Dropdown广泛应用于各种Web应用程序中，特别是表单和导航栏中。它可以用于选择选项、过滤数据、展示菜单等。
在腾讯云的产品中，可以使用Onsen UI和React来创建和定制Dropdown组件。Onsen UI是一个开源的移动端UI框架，提供了丰富的UI组件和交互效果。React是一个流行的JavaScript库，用于构建用户界面。
腾讯云的相关产品和产品介绍链接地址如下：
- 腾讯云移动开发平台（https://cloud.tencent.com/product/mpp）：提供了丰富的移动开发工具和服务，包括移动应用开发、移动后端服务、移动测试等。
- 腾讯云云原生应用平台（https://cloud.tencent.com/product/tke）：提供了云原生应用的开发、部署和管理平台，支持容器化应用和微服务架构。
- 腾讯云数据库（https://cloud.tencent.com/product/cdb）：提供了多种类型的数据库服务，包括关系型数据库、NoSQL数据库等。
- 腾讯云服务器（https://cloud.tencent.com/product/cvm）：提供了弹性计算资源，用于部署和运行应用程序。
- 腾讯云网络安全（https://cloud.tencent.com/product/ddos）：提供了多种网络安全服务，包括DDoS防护、Web应用防火墙等。
请注意，以上仅为腾讯云的一些相关产品，其他云计算品牌商也提供类似的产品和服务。
相关·内容
1回答
从npm安装第三方组件时出现问题。例如，有一个dropdown react模块，我可以很容易地在我的模块中使用它。但我必须在我的许多模块中声明它的样式和组件的其他依赖项。
类似于此组件
我必须在我的每个模块中注入它的风格
import 'icheck/skins/all.css';
如何解决这个问题？
浏览 12提问于2017-03-01得票数 0
有没有办法使用Onsen-UI作为UI前端，或者只使用React Native的常规HTML5？
我知道React Native应该与React.js一起使用，但我想使用不同的前端框架有两个原因，比如Onsen或Ionic。首先，我现在不想学习一个新的框架，我没有时间。其次，我现有的基于Cordova的应用程序是用Onsen构建的，我想将其转移到React Native上。
提前谢谢。
浏览 3提问于2016-05-31得票数 3
目前我们正在使用onsen.io作为我们的react UI框架 据我所知，gatsby是一个react开发框架，它有助于更轻松地构建PWA 因此，它应该与其他UI框架兼容 然而，由于gatsby迫使人们使用reach/route库，其他UI框架可能更喜欢使用其他UI框架(例如某些移动优先UI框架，以创建移动UI体验) 我真的很感兴趣，“gatsby能与这个或其他UI框架兼容吗？”
浏览 9提问于2020-06-19得票数 0
1回答
我正在开发phonegap应用程序，为此，我希望Dropdown菜单在我的ONSEN页面中。
如何实现这一目标？
请帮帮忙。
浏览 3提问于2015-03-16得票数 0
回答已采纳
我是新的移动开发和探索的Onsen用户界面为我的工作。我还了解了ngCordova的情况。我看到Onsen UI谈到使用角js进行开发。在Onsen中是否支持和推荐使用ngCordova？我正在开发的应用程序主要是为但不限于安卓，iOS，但应该使用在桌面上，并尽量减少调整。
浏览 12提问于2015-04-04得票数 0
回答已采纳
我正在尝试安装一个搜索工具包演示程序"IMDB Search Demo"：
我将：的内容复制到桌面上的一个文件夹中
我安装了nodejs，进入cmd文件夹，输入"npm install“和"npm start”
有一个大得离谱的错误列表，例如：
ERROR in ./src/index.tsx
(2,24): error TS2307: Cannot find module 'react'.
最后：
webpack: Failed to compile
然后我用"npm I -S react“自己安装了react。
npm启动:相同的错误
浏览 0提问于2017-02-21得票数 0
回答已采纳
1回答
对于Onsen UI，我是新手，我尝试在Navigator元素中使用这个代码在Page上呈现一个工具栏，但是我只能看到呈现了Button和Hello div。有人能告诉我我做错了什么吗？
import React from "react";
import ReactDOM from "react-dom";
var ons = require("onsenui");
var Ons = require("react-onsenui");
class App extends React.Component {
rende
浏览 2提问于2018-01-23得票数 0
回答已采纳
我在当前的项目中使用了react-monaco-editor，但在运行时遇到了一些问题。我遵循了文档，并在我的文件中进行了相应的更改。 这是我的package.json文件 {
"name": "chatbot_compiler",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@te
浏览 667提问于2020-03-21得票数 3
我正在尝试将Onsen ()的avatars模式移动到一个Meteor应用程序中，但是标签不加载。Firebug记录了来自Onsen的消息：
Onsen需要jqLite。加载jQuery后加载AngularJS以修复此错误。jQuery可能破坏Onsen行为。
尽管已经安装了jquery包，但出现了这条消息，为了消除它，我必须将jquery包含到client/lib文件夹中(不知道这是否正确)。
我还在我的项目中添加了urigo:角包，因为Onsen需要角，但这并没有起作用。现在我在日志中得到的唯一消息是
警告:尝试加载角度不止一次。
它摘自Onsen代码：
if (windo
浏览 3提问于2015-03-23得票数 0
回答已采纳
我想在React中使用。
在Onsen UI2.0的中，使用ons-navigator的属性var来表示导航器。
但是，var只能与Angular一起使用。所以我的问题是如何使用React来引用navigator。
浏览 4提问于2016-01-28得票数 0
1回答
我正在使用Bottstrap的reactJS。我试着把用户形象和下拉。因此，当用户单击下拉菜单时，该下拉菜单将打开。 我的下拉列表不工作。 这是我的代码。： <div class="dropdown">
<a href="#" data-toggle="dropdown" class="nav-item nav-link dropdown-toggle user-action">
<img class = "loginImage" src="https:/
浏览 29提问于2021-06-24得票数 0
回答已采纳
1回答
我已经用Ember.js和Cordova开发了一个应用程序，它在新设备上运行得很好，但在较旧的设备上却很落后。
Onsen UI非常适合我的需要，但是它是围绕着角度设计的，我不确定它是否可以用Ember实现。(我试着没有用)。
我一直在寻找使用Ember和Angular在一起，然而，我发现的只是角度与恩伯的辩论。
Onsen的论坛页面要求访问者在堆栈溢出上发表文章。
我正在寻找有关如何使用Ember/车把实现Onsen用户界面的指导。
这是我想要利用的特别演示
浏览 2提问于2014-06-30得票数 0
回答已采纳
有了新的react导航v5，它就不可能与react-native-web一起使用了。仅仅导入createBrowserApp就会抛出错误 import {createBrowserApp} from "@react-navigation/web"; 在@反应导航/web/dist/Link.js中显示以下错误 TypeError: (0 , _core.withNavigation) is not a function 有没有人知道如何在react-native- v5中使用react导航web？我需要路径中的url历史，但现在它已经变得不可能了。
浏览 23提问于2020-04-25得票数 2
我试图将输入添加到顶级模块中，基本上我希望
import DropDownButton from 'bootstrap-dropdown-button'
才能正确打字。在typings/bootstrap-dropdown-button/index.d.ts内部，我有以下内容
import {Component} from 'react';
declare module 'bootstrap-dropdown-button' {
//var DropdownButton: any;
//export default Dropdo
浏览 1提问于2017-05-30得票数 1
回答已采纳
我的应用程序一点击速度测试screen.This就会关闭，这是我的代码。它在调试模式下运行良好。但是在发行版(Apk)中，屏幕没有打开。这些是我为这个组件使用的包。
import React, {useState, useEffect} from 'react';
import {
Text,
Image,
View,
ScrollView,
TouchableOpacity,
SafeAreaView,
StatusBar,
ImageBackground,
Dimensions,
Modal,
TouchableWith
浏览 5提问于2022-03-16得票数 0
1回答
我正在构建一个使用React和Onsen UI的PWA和绑定。我试着让Tabbar在Onsen的网站上展示的官方示例中轻松自如。我的代码目前看起来如下(非常简单)：
import React, { Component } from 'react';
import { Page, Tabbar, Tab } from 'react-onsenui';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import Sc
浏览 3提问于2019-01-19得票数 0
> Hi我试图在标题列表项中使用optionsBar & optionsPie作为下拉选项，就像我如何使用home和aboutUs的其他链接一样
嗨，我正在尝试使用optionsBar & optionsPie作为标题列表项中的下拉选项，就像我如何使用home和aboutUs的其他链接一样。
import React, {Component} from 'react'
import { Link } from 'react-router-dom'
import { Dropdown, Menu, Icon} from
浏览 3提问于2018-05-27得票数 0
回答已采纳
我使用的是onsen-ui的react版本。有没有好的方法把一个列表添加到另一个列表中？我正在寻找类似jQueryMobile的可折叠/折叠列表。
浏览 6提问于2016-08-06得票数 0
回答已采纳
1回答
我想学习React Native，但我不知道如何安装它。它给出了这个错误消息。 命令: npm install -g expo-cli //安装react-native？错误: npm错误！cb.apply不是一个函数。 有人能帮上忙吗？谢谢。
浏览 9提问于2020-09-13得票数 0
回答已采纳
当我尝试在React上用axios打补丁时，我得到了这个错误。后端是工作的Node - Mongo，在Postman中尝试时一切正常。 下面是我的代码：back-end front-end 有什么帮助吗？
浏览 6提问于2020-09-26得票数 0
1回答
在过去的几年里，我从knockoutjs到durandaljs，然后是angular 1.x。现在我正在考虑学习angular 2和Aurelia。我现在对Angular2并不是很感兴趣，所以我正在学习Aurelia。现在，您可以使用与离子或Onsen UI相结合的Angular2来开发移动应用程序。我想知道是否有可能用Aurelia和Onsen UI做同样的事情。如果我能找到示例或教程，这将是有帮助的。谢谢。
浏览 11提问于2017-02-02得票数 1
我正在尝试在react中实现microsoft oauth按钮，重定向/弹出窗口允许用户登录到他们的microsoft帐户，然后使用信息来获得访问令牌，然后发送到图形api，以获得用户信息来登录。我正在使用这个包https://www.npmjs.com/package/msal，并尝试注册一个应用程序重定向到的url。 问题是react应用程序正在使用散列路由器延迟加载页面，并且为了在Azure AAD中注册重定向url，它不能是片段。因此，我尝试切换到浏览器路由器，并在本地主机上进行了测试，至少获得了成功重定向的结果。 那么在生产版本中尝试它就不能成功地重定向。每次它重定向、刷新甚至在u
浏览 7提问于2019-06-22得票数 1
我有nextjs app + typescript + react-leaflet
当我启动我的开发服务器npm run dev时，它没有错误，但是当我用npm run build开始构建时，它说。
Type error: Module '"react-leaflet"' has no exported member 'useEventHandlers'.
1 | import { useMemo, useCallback, useState } from 'react'
> 2 | import { useMap,
浏览 40提问于2021-06-08得票数 0
回答已采纳
所以我有以下问题。我从安装了expo-video-player并添加了必要的依赖项。虽然在Android上一切正常，但我的应用程序在网络浏览器上崩溃了。所以我的问题是，这种行为是不是意料之中的？
作为参考，以下是我使用Videoplayer的用法：
import React, { Component } from 'react';
import {
View,
Dimensions,
StyleSheet
} from 'react-native';
import { Video } from 'expo-av';
imp
浏览 11提问于2020-03-10得票数 0
如何在React中使此materialize下拉菜单工作？
<a className='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<ul id='dropdown1' className='dropdown-content'>
<li><a href="#!">one</a></li>
浏览 0提问于2015-08-25得票数 1
我正在尝试使用OnsenUI 2(目前的rc12)和jQuery (3.0.0)构建一个应用程序。有许多例子使用ons.ready()来执行..。某物。让我感到困惑的是，他们网站上的入门示例使用了这个功能。(这两个示例都是index.html的头)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onse
浏览 4提问于2016-06-21得票数 2
回答已采纳
1回答
在使用React将我们的Onsen v1应用程序(基于AngularJS1)迁移到Onsen v2时，我遇到了一个小问题:实现有关用户身份验证的逻辑(如果没有“保存的凭据”，则重定向到登录屏幕)。
下面是我的应用程序的结构..。
入口点是App.js文件，如下所示：
import React from 'react';
import {Navigator} from 'react-onsenui';
import Home from './Home';
import Login from './Login';
class A
浏览 2提问于2018-04-05得票数 0
我有一个react组件，它在挂载时接受dom引用(我知道这是一个边缘情况)。我想知道是否有必要将托管dom的属性设置为null。或者react会处理它吗？
componentDidMount() {
this.elm = document.getElementById('foo')
}
componentWillUnmount(){
this.elm = null
}
浏览 16提问于2017-12-19得票数 5
回答已采纳
3回答
大家好，
我尝试通过jQuery禁用下拉列表，并且我希望保留服务器端/后端下拉列表中的值，尽管它已经被禁用。
这是我的jQuery代码：
if('${actionBean.list1.size()}' > 0)
$('#dropdownA').prop("disabled", true);
但是，在禁用下拉菜单后，java文件中的值变为null：
System.out.println("dropdown value is " + getdropdownA());
在用户选中后禁用下拉列表的情况下，有没有办法保持这个值
浏览 0提问于2014-01-07得票数 0
嗨，我正在尝试使用React 18.2.0 & Microbundle创建一个示例库，尽管库构建成功，但是当它在客户端应用程序中使用时，我在控制台日志中得到了以下错误：
库源代码
下面是我的图书馆代码。
App.js
import './App.css';
import Dropdown from "./components/Dropdown";
function App() {
let dropdown_data = ['Item 1', 'Item 2', 'Item 3'];
浏览 17提问于2022-07-11得票数 5
回答已采纳
我正在用Onsen Ui 2和Cordova开发一个应用程序。现在，我买了一个新的Pc，并将创建的App文件夹(使用Onsen 2)复制到我的新Pc上。在这里，我打开了我的index.html文件在电脑和字体，我‘正常’不是材料。这怎么可能，怎么回事？
PS:我还没有在新的Pc上安装cordova。
图片：
浏览 0提问于2016-10-18得票数 0
回答已采纳
1回答
我正在用Onsen构建一个移动应用程序，它是基于AngularJS构建的，我对此并不熟悉。我希望在搜索栏上使用远程自动完成，并使用结果填充一个on -list。
我浏览了一下文档，找不到任何与自动完成相关的东西，只是开始--懒惰重复--这很好，但是不可能用搜索输入来过滤结果。
我知道我可以使用jQuery或jQuery移动，但是导入了所需的文件后，我仍然会得到错误：“自动完成不是一个函数”，页面将不会显示任何jQuery移动元素。
这些是我的进口品：
<link rel="stylesheet" href="components/loader.css"&g
浏览 5提问于2015-07-29得票数 0
回答已采纳
2回答
我正在使用onsen-ui来设计一个前端带有React的meteor应用程序。据我所知，onsen-ui通过pushing页面管理到堆栈的导航，其中每个页面都有一个惟一的标识符。 下面是我的页面在App.js中的加载方式 loadPage = (page) => {
const currentPage = this.navigator.pages.slice(-1)[0]
if(currentPage.key != page.name){
this.navigator.pushPage(
{
co
浏览 19提问于2019-03-22得票数 1
回答已采纳
我是新来的反应。指定用于创建拖放组件的任务。我跟踪了一些博客来完成这个任务，它只接受图像文件类型。现在的任务是，当点击上传图标，它应该打开文件资源管理器，它应该只显示图像类型的文件。我想不出那是怎么回事。我从不同的博客中获取的代码包括：
拖放组件：
import React from "react";
import { useDropzone } from "react-dropzone";
import UploadIcon from '@mui/icons-material/Upload';
const Dropzone = ({ onDr
浏览 4提问于2022-10-21得票数 0
1回答
如何在没有Angular的情况下安装Onsen UI 2？这里有不同的指南，但当我执行javscript one (> npm install onsenui)时，我总是得到ReferenceError: Angular is is defined，没有angular如何正确安装？
浏览 12提问于2016-09-15得票数 0
回答已采纳
我是Onsen中的新手，我想用HTML和CSS开发一个应用程序，稍后我将与它集成主干。我不知道Angular.js。我正在做一个Onsen项目，只是加载onsenui.js而不是angular.js，但是我得到了一个错误：Uncaught ReferenceError: angular is not defined。
所以我想知道Onsen用户界面是否依赖角度？我也可以做一个没有角度的Onsen项目吗？
浏览 4提问于2014-11-12得票数 2
回答已采纳
我有一个反应与图像原生web应用程序。我想进行平移和缩放，所以我尝试使用react-native- pan -zoom模块中的ImageZoom对其进行包装。
<ImageZoom
cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
imageWidth={200}
imageHeight={200}
>
<Image source={`/EventMaps/${name}`}
浏览 0提问于2018-03-20得票数 1
我是一个新的反应和钩子，我试图实现一个过滤器，其中最后选择的过滤器选项将设置我的下拉开关上的值，但同时更改URL时，过滤器是选定的。 我的问题是我只能做其中一个，但不能两个都做。下面是我的过滤器下拉组件： import React, { useState } from 'react'
import { Dropdown } from 'react-bootstrap';
function FilterDropDown ({onFilterChange}) {
const handleSelect=(e)=>{
console.lo
浏览 15提问于2021-10-10得票数 0
回答已采纳
2回答
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls
浏览 14提问于2020-10-02得票数 0
13回答
如何在React组件中使用render方法中的注释？
I有以下组件：
'use strict';
var React = require('react'),
Button = require('./button'),
UnorderedList = require('./unordered-list');
class Dropdown extends React.Component{
constructor(props) {
super(props);
}
handleClick() {
浏览 33提问于2015-06-10得票数 317
回答已采纳
1回答
试图创建一个既针对macos，又针对ios/android的新项目似乎失败了。
步骤：
接下来的步骤反应本地网站，使用创建-反应-本机应用程序，以获得一个本机应用程序。效果很好。
使用react本机- macos init和macos来获得mac应用程序-它的工作也很好。
注意到#1使用App.js，#2使用某种index.platform.js模型，我将#2中的xcode项目改为寻找App.js。这至少可以确保达到相同的代码。
正如react本机macos github页面所要求的那样，我将#2合并到#1中。(不清楚是否应该覆盖，使用“同上”命令)
将rn-cli.con
浏览 3提问于2017-11-19得票数 1
我是一个React初学者，我想用React创建一个下拉列表，所以我做了以下代码：
模块dropdown.js
var React = require('react');
var DropdownItemWrapper = React.createClass({
render: function() {
console.log("listItems.map")
return React.createElement(
'li',
null,
浏览 0提问于2015-12-02得票数 0
回答已采纳
我创建了一个React应用程序，然后将Tailwind集成到其中。当我运行npm start时，我得到了这个错误。
TypeError: Object.entries(...).flatMap is not a function[![enter image description here][1]][1]
TypeError: Object.entries(...).flatMap is not a function
at flattenColorPalette (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_mo
浏览 0提问于2020-11-19得票数 31
回答已采纳
1回答
我找不到monaca onsen ui的演练。大多数都是初学者无法理解的高级教程。Angular、Jquery和普通的javascript混合在一起，所以我搞不清哪个是哪个。
我想把一些东西保存到我的后端。我遵循了他们的教程，但我迷路了。
Onsen是一个很好的框架，但是如果没有演练教程，程序员将如何学习呢？
浏览 2提问于2015-08-24得票数 2
我有两个文件index.js和map.js。在map.js中，我有Kartta组件，它包含一个传单地图和一个方法fetchAll()，该方法fetchAll()根据从API获得的坐标在地图上创建标记，在本例中是test.json。如果我将该方法放入componentDidMount()中，它可以很好地工作，它会在加载时创建标记。但是，我想通过单击"Haku“按钮来创建这些标记，该按钮位于Sidebar组件中的index.js中。
这里是map.js
import React, { Component } from 'react';
import L from '
浏览 0提问于2020-03-24得票数 0
我是新的反应和语义用户界面，最近注意到下拉菜单不工作。在哪里以及如何初始化语义下拉列表和其他模块？
我搜索了它，发现你必须初始化语义模块，但是我不知道在哪里添加初始化代码到我的React应用程序中。
我找到的代码是：
$('.ui.dropdown').dropdown();
我尝试在“公共”文件夹中的“index.html”文件中添加代码的脚本元素，但仍然无法工作。然后我发现我可以在className中添加'simple‘，但是没有任何选项(选择、按钮)。
我在公用文件夹中的index.html文件中包含语义UI css：
<link
rel=
浏览 0提问于2019-04-23得票数 1
回答已采纳
2回答
我想使用在React中构建我的for应用程序，但对RTL的支持对我来说是必须的。由于该库不支持RTL，我正在考虑自己添加对RTL的支持，但我的知识非常基础。
我知道他们在生成CSS文件时使用了较少的代码。有没有一个插件可以减少同时支持LRT和RTL的CSS的输出？还有没有其他方法来添加RTL支持？我不介意自己做这件事，并创建一个拉取请求，我只想知道如何去实现它。
浏览 20提问于2017-01-22得票数 2
1回答
我正在制作一个示例应用程序来学习如何使用cordova、phonegap、angular.js和onsen。来自CodeSchool关于angular.js和这个示例应用程序()的一个很好的教程视频显示，我们可以通过将var app = angular.module ('app',['onsen]);放到另一个文件中来实现应用程序中的var app = angular.module ('app',['onsen]);。
我试过了但不起作用。只有当我将var app = angular.module ('app',['ons
浏览 3提问于2015-05-04得票数 1
回答已采纳
react-intl包有一个defineMessages方法，用于定义以格式翻译的消息：
const messages = defineMessages({
'account.activation.error': {
id: 'account.activation.error',
defaultMessage: 'This activation link is not valid.',
},
});
我找不到这个包的类型定义，那么如何使用TypeScript来定义它呢？
浏览 1提问于2021-06-12得票数 0
回答已采纳
我想创建下拉组件。
当我单击DropdownHandler组件时，我希望保存状态isOpen，它可以是true或false。如果是true，则<DropdownContent/>使用相同的state来显示内容。默认情况下，state isOpen是<Dropdown />组件中的false。
我该怎么做？
App.jsx
import React from 'react';
import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dro
浏览 4提问于2017-02-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
