redux 形式的多个复选框

2024-02-26

我想问一下,场景是这样的。我有多个复选框,但我的问题是每当我勾选一个复选框时,所有 4 个复选框都会被选中。还有为什么复选框的值只是 true 或 false。这是我的复选框:

<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value="Formative Stages" /> Formative Stages</label>
</div>
<div className="checkbox">
    <label><Field name="investor_stage" component="input" type="checkbox" value=" Later Stages" /> Later Stages</label>
</div>

对于像我这样刚接触 redux 和 React 的人可能会发现提到的原始代码here https://github.com/erikras/redux-form/issues/1037#issuecomment-243003954令人困惑。我修改并将其转换为 ES6 类。我还删除了引导程序、验证并使其易于调试。

这是修改后的代码

import React from 'react';

class CheckboxGroup extends React.Component {

    checkboxGroup() {
        let {label, required, options, input, meta} = this.props;

        return options.map((option, index) => {
            return (
            <div className="checkbox" key={index}>
                <label>
                    <input type="checkbox"
                           name={`${input.name}[${index}]`}
                           value={option.name}
                           checked={input.value.indexOf(option.name) !== -1}
                           onChange={(event) => {
                               const newValue = [...input.value];
                               if (event.target.checked) {
                                   newValue.push(option.name);
                               } else {
                                   newValue.splice(newValue.indexOf(option.name), 1);
                               }

                               return input.onChange(newValue);
                           }}/>
                    {option.name}
                </label>
            </div>)
        });
    }

    render() {
        return (
            <div>
                {this.checkboxGroup()}
            </div>
        )
    }
}


export default CheckboxGroup;

Usage:

let optionsList = [{id: 1, name: 'Optoin1'}, {id: 2, name: 'Option 2'}, {id: 3, name: 'Option 3'}]     
<Field name="roles" component={CheckboxGroup} options={optionsList} /> 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

redux 形式的多个复选框 的相关文章

  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • Facebook SDK 登录/注销 ngrok

    我正在尝试将我正在构建的网络应用程序与 Facebook 集成 Facebook 现在要求所有 API 调用都必须从 https 站点进行 我正在构建的这个应用程序只是为了好玩 所以我使用的是 localhost 我在用着ngrok将我的请
  • React 组件等待所需的 props 渲染

    我正在父组件内部声明一个组件 我想在一个文件中建立特定的道具 然后在父组件中 我希望能够同时为子组件建立其他道具 因为它们是共享属性 在大多数情况下 我的问题是 子组件尝试渲染并失败 因为首先没有建立所需的道具类型 有没有办法告诉子组件等待
  • 你如何在react-native中实现捏合缩放?

    我一直在研究 PanResponder 我当前的工作假设是 我将检测是否有两个触摸正在向外移动 如果是 则增加元素大小onPanResponderMove功能 这似乎是一种混乱的方法 有没有更顺畅的方法呢 如果您只需要简单的捏缩放功能 只需
  • React router v6 和路由内页面的相关链接

    您好 我正在尝试使用 React Router 将项目更新到 v6 我了解了基础知识 但在相关链接方面遇到了困难 我们有一个页面 通过 id 呈现给定项目的参考文档 该文档可以使用同级 ID 链接到其他 同级 材料 换句话说 用户可以在文档
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这
  • 在 React 中使用 .less 文件

    我正在尝试将 less 文件与极简主义 React 应用程序一起使用 使用创建反应应用程序 我已经添加less and less loader to my 包 json以及我的模块规则webpack config js文件 然而 类引用并未
  • 下一张图片不采用类属性

    我正在使用 Next js 和next image显示图像 但 CSS 在其中不起作用 该图像是 SVG 格式 我已将其放在公共文件夹中 我正在使用 Tailwind CSS 与此一起使用
  • 在这个反应示例中,bind 做了什么?

    什么是bind在这个声明中做this tick bind 这个 在下面的代码中 export class Counter extends React Component constructor props super props this
  • 更改所选元素的颜色 - React

    我是反应新手 我试图更改所选的一个特定 li 的颜色 但它会更改所有 li 的颜色 此外 当单击另一个 li 时 我希望第一个 i 不再处于活动状态 这是代码 http codepen io polinaz pen zNJKqO http
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div
  • ReactJS 子级 - 过滤掉空值

    我正在渲染我的组件
  • 使用 rollup.js 创建 React 库时出现错误 null(读取“useState”)

    我正在使用 rollup js 创建一个反应库 但是当我运行时npm run build我收到一个错误 仿佛useState尝试从中检索钩子null Uncaught TypeError Cannot read properties of
  • Firestore 查询 .toUpperCase() 不起作用

    我正在尝试创建一个网站 使用户能够搜索 Firebase Firestore 中的文档集合 该过程涉及将用户的输入保存为状态 useState 并利用 useEffect 挂钩来查询 Firebase 数据库 但是 我遇到了一个问题 即使用
  • 使用 Jest 和 React JS TestUtils 测试表单

    我有一个带有 3 个单选按钮的表单 如下所示 假名
  • 我点击的号码没有出现在反应项目的屏幕上

    当我尝试在屏幕中呈现点击的数字时 该数字没有出现 但它确实可以在控制台中显示 我不知道如何修复它应该在屏幕上 号码 旁边应用的号码 import render from testing library react import React
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di

随机推荐

  • 通过另一个列表过滤一个列表 C#

    我有以下业务对象 public class ItemCategoryBO public string ItemCategory get set public string Title get set public class ItemBO
  • 填充 std::tuple

    我有一个重载函数 如下所示 template
  • Javascript 获取 Flask json

    所以我试图将 Flask 服务器连接到前端创建反应应用程序 现在我只想验证我是否可以在两者之间发送 json 下面是每个错误的代码以及更多关于错误的描述 创建 React App 获取 import React Component from
  • 使用 Networkx 绘制带边的图

    我一直被一件很简单的事情所困扰 我正在尝试绘制并显示一个具有 2 个节点和 1 个边的图 但我收到这个错误 Traceback most recent call last File
  • 安装 MySQL-python

    我在尝试在我的 Ubuntu Linux Box 上安装 MySQL python 时遇到以下失败 从下面来看 问题似乎是sh mysql config not found有人可以建议我该怎么做吗 rmicro ubuntu pip ins
  • CSS 类定义在 元素内不起作用

    你们能告诉我为什么 css 类定义在下面的示例中不起作用吗 我正在使用 GWT 2 4 Chrome 17
  • 历史推送状态和滚动位置

    当用户使用 HTML5 popstate 处理程序导航回浏览器历史记录时 我尝试检索滚动位置 这是我所拥有的 document ready function window on popstate PopStateHandler link c
  • 是否可以像来自用户一样向 Bot Framework 发送消息?

    我正在使用 Direct Line 3 0 和 Microsoft Bot Framework 并要求网页将一些表单字段发送到机器人 就像用户发送它们一样 例如 当用户按下 提交 时 电子邮件 电话等字段将被发送到机器人 就像用户这样发送它
  • 获取精灵部分偏移量

    我正在尝试获取 elf 文件每个部分的偏移量和数据 我已经有了包含以下代码的部分名称 include
  • Python - 保存在 GNU Nano 2.2.4 中编辑的文件[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我对编程 使用 Raspberry
  • 调试 Outlook 插件桌面

    我目前正在使用 yeoman 和生成器办公室为 Outlook 开发一个插件 以将电子邮件及其附件保存到另一项服务 Outlook 版本 MS Office Professional Plus 2016 v 16 0 48 49 1000
  • 提交表单时,表单 onSubmit 函数不会触发

    我看过了 找不到任何像我的问题一样的东西 我有一个表格无法进行验证 我知道 JavaScript 文件正在加载 因为页面上的其他功能正在正常工作 我的代码如下
  • 在 Swift 3 中以编程方式使用 ScrollView

    我搜索了其他问题 似乎在 swift 3 中使用自动布局以编程方式创建滚动视图时仍然遇到一些问题 我能够让我的滚动视图显示如下图所示 但是当我滚动到底部时 我的其他标签却出现了问题不显示 滚动顶部 标签也不会消失 希望有人可以帮助查看我下面
  • 将类添加到表单字段 Django ModelForm

    我正在尝试使用 Django ModelForm 编写 Bootstrap 表单 我已阅读 Django 文档有关表单的 Django 文档 https docs djangoproject com en dev topics forms
  • Android Retrofit 2,用于编辑响应的 addInterceptor 和 addNetworkInterceptor 之间的差异

    我一直在尝试实现一个拦截器 OkHttp 3 2 和改造 2 用于在作为响应返回之前编辑 JSON 响应 我们请求数据的服务器根据成功或错误返回不同的数据 这使得映射对象变得困难 我试图通过将拦截器添加到 Retrofit 作为 Netwo
  • 去哪一个; Yii 或 Symfony

    好的 我是NOT询问哪一个更好 我知道 Yii 并不比 Symfony 好 Symfony 也不比 Yii 好 我想问的是我应该选择哪一个呢 我想提出几点 我有一个大型项目 格式非常好 编码也非常好 如果您看到我的代码 您会认为我制作了自己
  • Java Process无法通过Runtime.getRunTime().exec()获取InputStream

    try String str Process process Runtime getRuntime exec bash home abhishek workspace Pro run InputStream isout process ge
  • 动态加载程序集中的强类型 Razor 视图不会在运行时编译

    我在程序集中有一个 MVC3 区域动态加载与MEF 如果我使用具有强类型视图的 Webforms 视图引擎 一切都会正常工作 如果我将 Razor 视图引擎与dynamic模型 效果也很好 但如果我使用强类型 Razor 视图 视图编译在运
  • 在类上覆盖 dict()

    我正在尝试做一个dict 类似 Python 中的类 当你创建一个类时 你有某些方法告诉Python如何创建一个内置类 例如 覆盖 int 方法告诉 Python 如果用户使用则返回什么int 在类的一个实例上 同样适用于 float 您甚
  • redux 形式的多个复选框

    我想问一下 场景是这样的 我有多个复选框 但我的问题是每当我勾选一个复选框时 所有 4 个复选框都会被选中 还有为什么复选框的值只是 true 或 false 这是我的复选框 div div