如何在react-select v2中创建optgroup?

2024-05-15

我想在我的反应选择列表中包含 optgroups,但它似乎没有记录在任何地方。我有以下结构,是从评论中提取的https://github.com/JedWatson/react-select/issues/59 https://github.com/JedWatson/react-select/issues/59:

render() {
  const options = [
    {
      label: "Group 1",
      children: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "A root option", value: "value_3" },
    { label: "Another root option", value: "value_4" }
  ];
  return <Select options={options} />
}

我希望“Group 1”是一个 optgroup,其中选项 1 和 2 作为子项。相反,“Group 1”只是作为常规选项出现。有谁知道“Group 1”中将其变成 optgroup 的正确密钥是什么?

我已经尝试过“孩子”和“价值观”,但没有效果。


options是神奇的钥匙:

render() {
  const options = [
    {
      label: "Group 1",
      options: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "A root option", value: "value_3" },
    { label: "Another root option", value: "value_4" }
  ];
  return <Select options={options} />
}

这呈现出我期望的方式。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在react-select v2中创建optgroup? 的相关文章

  • Xhr上传event.loaded问题

    opts xhr function var xhr new window XMLHttpRequest Upload progress xhr upload onprogress function e if e lengthComputab
  • 获取预转译源代码的 Karma 代码覆盖率

    我使用 Karma 来运行测试 使用 webpack 来捆绑文件 并使用 babel 进行 es6 gt es5 转译 我已经运行了测试并生成了代码覆盖率 但代码覆盖率数字是针对转译后的源文件的 是否有办法获得原始源文件的代码覆盖率 我尝试
  • 在复选框内映射复选框 ReactJS

    我有一个函数 一旦主复选框被选中 就会触发子复选框 并且所有这些复选框都是从 JSON 映射的 主复选框 最高级别 及其下面的所有子复选框 第二级别 都会在单击时显示 并且效果很好 我想要显示的是单击时主复选框 第三级别 的子复选框2 级项
  • DOM 元素宽度可以是非整数吗?

    我有一个页面 其 div 元素由 JavaScript 对齐 JavaScript 只是检查一组 div 元素来查找最大值偏移宽度 然后设置所有 div 元素 width成为最大偏移宽度 它在大多数浏览器和区域设置中都能完美运行 但在 Ma
  • 等待两个异步函数完成,然后在 Node.js 中继续

    我正在 Node js 中开发一个应用程序 其中调用异步函数两次 并将值分配给全局变量 问题是我想使用这两个调用的结果来做其他事情 但是这个其他事情不会等待结果被分配 这是我的代码 var a var b let x abcd foo x
  • 使用 jQuery 触发真实事件

    看来 jQuery 的trigger 仅运行与 jQuery 绑定的事件处理程序 我有一些使用本机浏览器事件绑定的模块 使用来自的代码https stackoverflow com a 2676527 https stackoverflow
  • 谁添加“_”单下划线查询参数?

    我有一个在 Apache 上运行的 PHP 服务器 我收到很多类似这样的请求 10 1 1 211 02 Sep 2010 16 14 31 0400 GET request 1283458471913 action get list HT
  • 在 HTML5 中堆叠多个画布

    我试图使用相互堆叠的四块画布 但除了顶部画布的内容外 它们的内容不会显示 我按照我希望它们显示的顺序将 z index 值放入其中 但只有最上面的一个显示内容 它们的位置是绝对的 z 索引是 1 2 3 和 4 是否还有其他原因导致它们不显
  • 如何在点击时添加和删除活动类 - 角度方式

    我正在这样做 div class tiles div 控制器 scope select function item scope selected item scope isActive function item return scope
  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 如何在 blob 类型中使用 UTF-8?

    我必须通过 csv 文件导出表 csv 文件数据来自服务器 按 Blob 类型 Blob size 2067 type text csv async exportDocumentsByCsv this commonStore setLoad
  • React:在哪里扩展对象原型

    我使用创建了一个纯 React 应用程序创建反应应用程序 https github com facebookincubator create react app 我想延长String类并在一个或多个组件中使用它 例如 String prot
  • Magnific Popup:来自span的源标题

    我想从锚标记内的隐藏标题字段中获取放大图像的标题 而不是从标题中获取 这是因为我的标题包含标记 HTML a href img zoom jpg img src img small jpg alt span class hide This
  • HighCharts - 两个 Y 轴,一个具有最大值

    我在使用 Highcharts 时遇到问题 我已将右 Y 轴设置为 min 0 和 max 100 它是 但它不起作用并生成 125 百分比 怎么了 http jsfiddle net SdTcU http jsfiddle net SdT
  • ajaxStart 和 ajaxStop 与 fetch API 等效

    我正在尝试将 API 调用从使用 jQuery ajax 迁移到使用 Fetch API 我使用 jQuery ajaxStart 和 ajaxStop 在服务器调用期间显示加载旋转器 我正在运行多个并行服务器请求 我希望旋转器在第一个请求
  • 当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时 Alpha 会变成黑色

    我正在使用代码从这里 https stackoverflow com a 15369753 5875416将剪贴板中的图像粘贴到页面上 它在所有浏览器 Chrome Firefox Edge 和 Opera 中都能正常工作 问题是 当图像是
  • 从选择控件 html 复制所选项目的文本

    我有一个带有预定义值的选择控件 我希望我的用户能够使用 CTRL C 复制所选项目的文本 我不希望他们能够更改项目的文本 只需用鼠标 键盘选择它 这是一个显示问题的小提琴 我无法选择所选项目的文本 http jsfiddle net 5C3
  • 只允许在输入字段中输入数字

    我想要打开电话号码字段这个网站 http myfrugaltech com dev savoo register 只接受数字或数字 我无权编辑 HTML 代码 那么可以使用 jQuery 通过定位字段 ID 来完成此操作吗 如果可以的话 该

随机推荐

  • LaTeX Beamer:改变子弹缩进的方法?

    我已经检查了Beamer Class手册 PDF文件 我不知道如何更改分配给 itemize 的缩进项目符号 这很重要 因为我使用 2 列幻灯片 并且我不希望投影仪占用太多的水平空间 Beamer 只是委托管理布局的责任itemize环境回
  • 如何在 Jenkins 中安排构建?

    如何安排 Jenkins 构建 使其只能在每天的特定时间进行构建 例如下午 4 点开始 0 16 1 7 我理解为 每个月周一到周日下午 0 分钟 下午 4 点 但是它每分钟都会构建 如果有任何建议 我将不胜感激 谢谢 Update 请阅读
  • rpart是自动剪枝吗?

    Is rpart自动修剪 生成的决策树rpart比具有自动修剪功能的 Oracle Data Mining 生成的级别要多得多 否 但拟合函数的默认值可能会 提前 停止分割 对于 早期 的某些定义 See rpart control对于您可
  • Angular Material 7 多重选择 - 设置选定值

    我正在尝试设置多选下拉列表的选定值 如下所示 循环根据条件选择多个复选框并进行设置 document getElementsByTagName mat pseudo checkbox index classList add mat pseu
  • Jframe 内有 2 个 Jdialogs 的 setModal 问题

    当我设置第一个选项时 我遇到了问题JDialog模态 第二个非模态 这是我正在尝试实现的功能 单击 测试对话框 按钮 一个JDialog有名字自定义对话框 主要的将会打开 如果单击 是 选项自定义对话框主 其他JDialog named 自
  • 添加 Outlook 2013 邮件项目上下文菜单。 VS 2012 C#

    您好 我想向 Outlook 2013 邮件项目上下文菜单添加一个新按钮 我使用 VS 2012 C 我搜索了互联网 但找不到执行此操作的方法 我正在升级 Outlook 2010 添加 其中修改了上下文菜单 在项目的 Visual Stu
  • 避免重复 GNU Make 规则

    我一直在编写一个执行一些依赖项生成的 Makefile 我发现自己必须重复规则 因为 遗留 代码库包含以下内容的混合 cpp and cc文件 好像有点难看 无论如何 是否可以指定目标的先决条件可以是 cpp or cc files 所以而
  • 静态文件不通过 IIS 提供服务,而是通过 localhost 提供服务 - ASP.NET Core 3.1 MVC 和 C#

    我是编程新手 我能够自己解决大部分问题 但这个问题超出了我的想象 我正在使用 Visual Studio 在本地运行我的应用程序 当我在 VS 中单击 IIS Express 来运行该应用程序时 该应用程序将在带有 url 的浏览器中打开h
  • 在Vim函数中获取不带文件扩展名的文件名

    我想在Vim中获取不带文件扩展名的文件名 我在我的中编写了以下函数 vimrc文件来编译并运行Java程序 function JAVA RUN javac M endfunction map
  • 使用 graphql 提供图像

    I have graphql服务器由表达Graphql我使用 mongoDb 将图像存储在普通数据库集合中 因为它们小于 16MB I have react and android应用程序 向客户提供这些图像的最佳方式是什么 在我的架构中
  • 模型元中的“可交换”是什么?

    看着艰难的 django auth 模型代码 我遇到了这段代码 class User AbstractUser class Meta AbstractUser Meta swappable AUTH USER MODEL 很明显 这和新的有
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • Android studio - 如何保存先前活动中选择的数据

    这是我的代码片段 这Textview充当按钮并具有Onclicklistner在他们 当cpu1000时Textview单击它会导致cpu g1000其代码如下所示的类 public class Game 1000 extends AppC
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • SQLite FTS4 使用特殊字符进行搜索

    我有一个 Android 应用程序 它使用 FTS4 虚拟表在 SQLite 数据库中搜索数据 它工作正常 但是当表中的数据包含特殊字符 如 或 时 SQLite MATCH 函数不会给出任何结果 我现在迷路了 谢谢 注意 默认的分词器真的
  • C# Byte[] 转 BCD 和 BCD 转 INT

    我有一个由 CashRegister Machine 创建的 Hex 文件 我必须读入这个文件 文件使用下面详述的格式 它就像套接字数据包 代码数据 2字节PLU 代码数据 7 字节单价数据 5字节数量数据 5字节数据总量 5字节PLU 名
  • 更新到 Kotlin 1.3.30 后出现“未解析的引用:Parcelize”

    我使用 Kotlin 1 3 21 很长时间了kotlin android extensions插件长期处于实验模式 今天我通过升级版本切换到 Kotlin 1 3 30 现在无论我使用什么 Parcelize注释我看到错误 Unresol
  • 如何使用 conda 在一行中安装多个包?

    我需要使用 conda 安装以下多个软件包 我不确定 conda forge 是什么 有些使用 conda forge 有些不使用它 是否可以将它们安装成一行而不需要一一安装 谢谢 conda install c conda forge d
  • 从 MATLAB 调用 Java?

    我想要Matlab程序调用java文件 最好有一个例子 需要考虑三种情况 Java 内置库 也就是说 任何描述的here http docs oracle com javase 6 docs api 这些项目可以直接调用 例如 map ja
  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com