动态生成单选按钮

2024-01-09

我有一个 redux 表单,其中包含一些单选按钮:

     <label htmlFor="passType">Pass type</label>
        {passType.touched && passType.error && <span className="error">{passType.error}</span>}
        <br />
        <input
          type="radio"
          {...passType}
          id="passType"
          value="0"
          checked={passType.value === '0'}
        /> VIP<br />
        <input
          {...passType}
          type="radio"
          id="passType"
          value="1"
          checked={passType.value === '1'}
        /> Regular<br />

一切都很好,但现在传递类型必须从状态动态生成:

PassTypes":[{"Id":1,"姓名":"VIP"},{"Id":2,"姓名":"普通"}]

这不起作用:

const renderPassTypes = passTypes => passTypes.map((passType, i) => 
(
  <input
    type="radio"
    {...passType}
    id="passType"
    value={passType.Id}
    checked={passType.Id === ?!?!?} 
  /> {passType.Value}<br />
)

我应该如何从一个对象编码一组单选按钮?

我还有一个验证器也需要继续运行:

const sendInviteValidator = createValidator({
  passType: required,
});

你尝试过的似乎不错。

render() {
  // Extract the fields from Redux Form
  const {fields: {passType}} = this.props

  // Read the options.
  // According to what you showed, it is structured as:
  //
  // [
  //   {"Id":1,"Name":"VIP"},
  //   {"Id":2,"Name":"Normal"},
  // ]
  const {passTypes} = this.props
  return (
    <div>
      <div className="label">Pass type</div>
      <div className="controls">
      {passTypes.map(option =>
        <label>
          <input
            type="radio"
            {...passType}
            value={option.Id}
            checked={passType.value === option.Id}
          />
          {option.Name}
        </label>
      )}
      </div>
    </div>
  )
}

以上render方法正在迭代passTypes构建无线电输入。

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

动态生成单选按钮 的相关文章

随机推荐

  • 让 PhP 代码先于 Javascript 执行

  • 附加文件内容作为 unix shell 命令的参数

    我正在寻找一个 unix shell 命令来附加文件的内容作为另一个 shell 命令的参数 例如 command lt lt commandArguments txt xargs 是专门为此构建的 cat commandArguments
  • 非常基本的 Backbone/Underscore via Require.js 问题让我抓狂

    我正在尝试实现一个极其基本的测试 该测试使用通过 require js 加载的 jquery underscore js 和backbone js 但出于某种原因 我似乎无法将所有内容正确排列 研究表明其他人没有遇到过同样的问题 所以我知道
  • 使用 jquery 和 css 在图像上显示文本

    我正在使用教程http www webdesignlondon tristar co uk website design london insane jquery image rollover http www webdesignlondo
  • QSplitter 显示两个小部件之间的分隔线或边距

    我有一个 QSplitter 和两侧的两个小部件 但我希望能够有一个边距 以便两个小部件之间有清晰的过渡 我查看了 QSplitter 和 QSplitterHandle 但没有看到任何明确的方法来执行此操作 如何在两个小部件之间添加分隔线
  • 从 Javascript 访问 Chrome 的内部 gzip 例程

    所有现代浏览器都包含用于与服务器交换压缩数据的 gzip 例程 谁能给我指出正确的方向来编写一个允许 Javascript 利用这个例程的 Chrome 扩展 我想在通过 WebSocket 将一些数据发送到服务器之前先用 Javascri
  • 如何设置基于注释的路由翻译?

    我网站的所有路由都是基于注释来实现的 现在 我想翻译我的路由 为了实现这一点 我尝试使用捆绑包JMSI18n路由包 https github com schmittjoh JMSI18nRoutingBundle 然而 文档没有给出任何如何
  • SQLite3 忽略重音符号

    如何在 SQLite3 上使用 LIKE 子句进行 SELECT 忽略重音符号 PS 这是为了Android内置的SQLite支持 有一个解决方案 它并不优雅 但可以在 Android 上运行 REPLACE 函数可以用普通字符替换重音字符
  • 将部分接口类型的对象转换为 TypeScript 中的“完整”接口类型

    假设我有一个界面A看起来像这样 interface A prop1 string prop2 string 我初始化对象obj像这样 const obj Partial a prop1 xyz 有什么办法可以投吗obj to A并自动设置未
  • R studio 列表和数据框自动名称完成不再工作

    突然 R Studio 在输入时停止自动完成我的列表和数据框内容mylist 然后按Tab 我得到的结果消息是 无匹配 我在非常简单的列表或数据框上尝试过 例如 simpledataset lt data frame a rep 0 100
  • 来自 Microsoft 文档的 C# String.Length

    微软文档指出 https msdn microsoft com en us library system string length 28v vs 110 29 aspx该代码将返回 7 个字符 Length 属性返回此实例中 Char 对
  • 如何从 iframe src 获取哈希值?

    当我执行 iframe src 时 我的 iframe 有一个带有哈希值的 url 它只是为我提供了 url 而没有从其他域附加哈希值 我可以读取带有哈希值的整个网址吗 由于安全限制不太可能 我很惊讶你甚至可以获得 URL 你能显示代码吗
  • 动态创建变量

    我曾尝试过学习Python org https www learnpython org en Hello 2C World 21要动态创建变量 可以按如下方式创建 food bread vars food asdasd print brea
  • OAuth 2.0 - 何时应使用刷新令牌更新访问令牌?

    我目前正在使用 OAuth 2 0 访问 Google API 根据我的理解 我应该使用返回的刷新令牌来更新访问令牌 是否应该在过期之前刷新 还是应该在用户使用已过期的访问令牌从 api 请求数据时刷新 如果应该在过期之前完成 我是否应该运
  • 断言在 Python 单元测试中调用了某个方法

    假设我在 Python 单元测试中有以下代码 aw aps Request nv1 aw2 aps Request nv2 aw 有没有一种简单的方法来断言特定方法 在我的例子中aw Clear 在测试的第二行期间被调用 例如有没有这样的事
  • 从大文件中分块数据进行多重处理?

    我正在尝试使用多处理并行化应用程序 该应用程序接受 一个非常大的 csv 文件 64MB 到 500MB 逐行进行一些工作 然后输出一个小的固定大小 文件 目前我做一个list file obj 不幸的是它已完全加载 进入内存 我认为 然后
  • ASP.NET 5 Web 项目和实体框架位于单独的项目中

    从哪里开始 这已经困扰我一整天了 我已更新我的项目以使用新的 ASP NET 5 空预览模板 我已经成功构建了所有项目 但是当我运行我的网站时 出现此错误 当前运行时目标框架不兼容 我的 WEB 命名空间 当前运行时目标框架 DNX 版本
  • 应用程序与 Nexus 7 和 Acer Iconia a210 不兼容

    我知道这个问题已经被问过几次了 但为什么我的应用程序与 Nexus 7 和 Acer Iconia a210 不兼容 我在现有问题中没有找到可行的解决方案 那么我还可能缺少什么
  • 等待直到通过 webClient 从 URL 下载文件

    我很难从 URL 下载几 MB 的 excel 文件然后使用它 我使用VS2010所以我不能使用await关键字 我的代码如下 using WebClient webClient new WebClient setting Windows
  • 动态生成单选按钮

    我有一个 redux 表单 其中包含一些单选按钮