首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在react js中使用视图选项进行选择

如何在react js中使用视图选项进行选择
EN

Stack Overflow用户
提问于 2020-09-26 06:53:28
回答 1查看 20关注 0票数 0

Screenshot

如何在ReactJS视图中选择不同于select和option的选项。

表单html:

代码语言:javascript
运行
AI代码解释
复制
<form>
  <div className="form1">
   <div className="flex-item1">
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">ProviderID</option>
      </select>
    </div >
    <div className="flex-item2" > 
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Network</option>
      </select>
    </div>
    <div className="flex-item4">
      <input type="submit"  value="Save" />
    </div>
  </div>

  <div className="form1">
    <div className="flex-item1">
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Policy</option>
      </select>
    </div >
    <div className="flex-item2" > 
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Member</option>
      </select>
    </div>
    <div className="flex-item5">
      <input type="submit"  value="Edit" />
    </div>
  </div>

  <div className="form1">
    <label className="flex-item1" >
      Frequency Utilization:
    </label>
    <input type="text" className="flex-item2" name="name" />
    <div className="flex-item6">
      <input type="submit"  value="Delete" />
    </div>
  </div>

  <div className="form1">
    <label className="flex-item1" >
      Service Utilization:
    </label>
    <input type="text" className="flex-item2" name="name" />
    <div className="flex-item3" > 
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Monthly</option>
      </select>
    </div>
  </div>

  <div className="form1">
    <label className="flex-item1" >
      Age
    </label>
    <input type="text" className="flex-item2" name="name" />
    <div className="flex-item3" > 
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Gender</option>
      </select>
     </div>
  </div>

  <div className="form1">
    <label className="flex-item1" >
      Age
    </label>
    <input type="text" className="flex-item2" name="name" />
    <div className="flex-item3" > 
      <select name="type"  className="CodesSelect3">
        <option  value="Drug">Gender</option>
      </select>
    </div>
  </div> 
</form>
EN

回答 1

Stack Overflow用户

发布于 2020-09-26 07:43:06

Choice Group

您可以使用Fluient Ui,它为Choice组提供您想要显示和使用的close组。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64074766

复制
相关文章
React Js 中创建和使用 Redux Store
本文,我们将学习在 React 应用中怎么创建 Redux Store。同时,我们将分享怎么使用 Redux store 去管理复杂的 states。
Jimmy_is_jimmy
2023/08/11
3190
React Js 中创建和使用 Redux Store
如何进行react状态管理方案选择
前言:最近接触到一种新的(对我个人而言)状态管理方式,它没有采用现有的开源库,如redux、mobx等,也没有使用传统的useContext,而是用useState + useEffect写了一个发布订阅者模式进行状态管理,这一点对我来说感觉比较新奇,以前从没接触过这种写法,于是决定研究一下目前比较常用的状态管理方式。
beifeng1996
2022/12/20
3.4K0
如何在 React 中引入 less?
本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像,因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展,这就是 less 如此易学的原因之一。
子舒
2022/06/09
3.9K0
使用MIC进行变量选择
如果有很多自变量,我们能在很多自变量中选出几个对因变量影响最大的吗?或许MIC可以解决这个问题哦。 # -*- coding: utf-8 -*- """ Created on Mon Mar 14
钱塘小甲子
2019/01/29
1K0
使用MIC进行变量选择
React篇(020)-如何在 React 中创建组件?
答案:有两种可行的方法来创建一个组件: 1. Function Components: 这是创建组件最简单的方式。这些是纯 JavaScript 函数,接受 props 对象作为第一个参数并返回 React 元素:
齐丶先丶森
2022/05/12
2.9K0
在 JS 中如何使用 Ajax 来进行请求
github 地址:https://github.com/qq44924588...
前端小智@大迁世界
2020/12/07
9.1K0
JS混淆加密,该使用哪些配置选项?
JS混淆加密工具,通常有众多的加密选项。比如,著名的JShaman,中文版有十余种配置选项、英文则有二十余种配置。
用户8703799
2023/07/13
2940
如何在 Vue.js 和 Nuxt.js 之间做出选择?
今天看了一位国外大佬的文章,主要是他对在项目中如何选择 Vue.js 或 Nuxt.js 的看法,欢迎大家在评论区发表看法,以下内容是他关于这个问题看法的整理,由于翻译水平有限,欢迎大家指正。
前端达人
2023/09/11
3.4K0
如何在 Vue.js 和 Nuxt.js 之间做出选择?
React |使用Antd 进行布局学习
node : v18.0.0 npx: 8.5.2 npx create-react-app react-route-layout antd: "^5.1.2" 路由使用:BrowserRouter,源自:react-router-dom import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWeb
heidsoft
2023/03/18
1.1K0
React |使用Antd 进行布局学习
如何在react中使用svg icons
该文介绍了如何在React组件中使用SVG图标。首先介绍了传统的使用方式,然后介绍了使用React组件的方式,最后通过一个名为`Mic`的组件示例展示了如何将SVG图标转换为React组件。通过使用Fis3插件,可以自动将SVG转换为React组件,从而简化了React项目中使用SVG的过程。
IMWeb前端团队
2017/12/29
2.8K0
如何在react中使用svg icons
如何在js中创建对象
七夕临近了,没有对象的来创建一个吧 使用对象字面量: const o = { name: "zehan", greeting() { return `Hi, 我是${this.name}`; } }; o.greeting(); // "Hi, zehan" 使用构造函数: function Person(name) { this.name = name; } Person.prototype.greeting = function () { return `Hi, 我是
ZEHAN
2020/09/23
7.7K0
如何在react中使用svg icons
首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是趁早放弃,以下为官方的svg支持标签:
IMWeb前端团队
2019/12/04
1.5K0
如何在react中使用svg icons
如何在 Bash shell 脚本中解析命令行选项
在 Bash 中解析选项的策略是循环遍历所有传递给 shell 脚本的参数,确定它们是否是一个选项,然后转向下一个参数。重复这个过程,直到没有选项为止。
用户8639654
2021/09/01
1.7K0
如何在 React 中优雅的写 CSS
看目录结构清晰明了,由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制,如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题,会产生非预期的页面样式渲染结果。
政采云前端团队
2019/12/20
4.1K0
如何在 React 中优雅的写 CSS
js实现选项卡
选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。
wfaceboss
2019/04/08
2.9K0
如何在 React 中快速实现暗黑模式
暗黑模式已成为许多应用程序和网站的最基本功能,因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能,使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。
程序那些事儿
2023/07/24
7120
如何在 React 中快速实现暗黑模式
如何在React中写出更好的代码
在React中编写更好的代码的提示,关于Linting、propTypes、PureComponent和其他几个点,帮你编写更好的代码。
用户6835371
2021/09/03
2.6K0
如何在React中写出更好的代码
如何在React中优雅的处理doubleClick
上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。
皮小蛋
2020/03/02
8.1K2
点击加载更多

相似问题

如何在选择选项(如文本)中使用name、ref、defaultValue?- in React Meteor

11

将所选选项持久化到antd选择中,在react js中进行选择

15

如何在react js中使用select选项?

20

如何在React选择中使用选项值

10

React.js:如何在选择选项中设置默认值?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文