首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在按insert item按钮时启用redux-form字段数组中禁用的字段?

在按下"insert item"按钮时,如果要启用redux-form字段数组中被禁用的字段,可以采取以下步骤:

  1. 在redux-form的表单组件中,将字段数组的状态存储在Redux store中。可以使用redux-form的FieldArray组件来处理字段数组。
  2. 在表单组件的state中,创建一个属性来存储每个字段是否被禁用的状态。初始时,所有字段都被禁用。
  3. 当点击"insert item"按钮时,触发一个Redux action,该action将更新字段数组的状态。通过修改对应字段的禁用状态为false,以启用该字段。
  4. 在Redux reducer中,更新字段数组的状态,根据action中的信息修改对应字段的禁用状态。
  5. 在表单组件中,使用redux-form的FieldArray组件来渲染字段数组,并根据每个字段的禁用状态来设置对应字段的禁用属性。

示例代码如下所示:

  1. 定义Redux action和reducer:
代码语言:txt
复制
// actions.js
export const enableField = (fieldIndex) => ({
  type: 'ENABLE_FIELD',
  payload: fieldIndex
});

// reducer.js
const initialState = {
  fields: [{ disabled: true }, { disabled: true }, { disabled: true }]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ENABLE_FIELD':
      return {
        ...state,
        fields: state.fields.map((field, index) => {
          if (index === action.payload) {
            return { ...field, disabled: false };
          }
          return field;
        })
      };
    default:
      return state;
  }
};

export default reducer;
  1. 在表单组件中使用redux-form的FieldArray组件:
代码语言:txt
复制
import React from 'react';
import { connect } from 'react-redux';
import { Field, FieldArray, reduxForm } from 'redux-form';

const renderFields = ({ fields }) => (
  <ul>
    {fields.map((field, index) => (
      <li key={index}>
        <Field
          name={field}
          component="input"
          type="text"
          disabled={fields[index].disabled} // 根据字段的禁用状态设置禁用属性
        />
      </li>
    ))}
  </ul>
);

const MyForm = ({ handleSubmit, enableField }) => (
  <form onSubmit={handleSubmit}>
    <FieldArray name="fields" component={renderFields} />
    <button type="button" onClick={() => enableField(1)}>Insert Item</button>
    <button type="submit">Submit</button>
  </form>
);

const mapStateToProps = (state) => ({
  initialValues: state.form
});

const mapDispatchToProps = (dispatch) => ({
  enableField: (fieldIndex) => dispatch(enableField(fieldIndex))
});

export default connect(mapStateToProps, mapDispatchToProps)(
  reduxForm({ form: 'myForm', enableReinitialize: true })(MyForm)
);

这样,在按下"insert item"按钮时,字段数组中被禁用的字段将被启用。你可以根据实际需求进行修改和调整。

相关搜索:如何在按下按钮时禁用按钮数组中的其余按钮是否在按钮单击时包含html中现有字段之间的字段?当字段jml_automatic小于id_km字段时,启用或禁用jquery中的提交按钮如何禁用空文本/数字字段中的按钮当控件隐藏时,如何禁用单选按钮中的必填字段?如何在仅显示数据时禁用表单的字段,但在使用新表单输入数据时启用字段仅使用CSS如何在填写完所有字段后启用已禁用的提交按钮当文本字段为空时禁用按钮等待其他文本字段中的任何更改在mongodb中匹配数组中的字段时,如何忽略其他字段?当输入字段具有值时,从提交按钮中动态删除禁用的值如何制作在JS + HTML中按下时禁用/启用彼此的按钮?android如何在编辑文本字段中输入数据时启用或禁用动态创建的开关如何在vuejs中禁用数组中表单的输入字段(动态表单)?如何在按下Javascript中的按钮后重新聚焦到文本字段中的位置?当尝试禁用按钮,直到用户在Vuejs的otp字段中输入数字时出错?在Cocoa/Interface Builder中,如何在按钮单击后清除文本字段中的文本如何在显示的字段尚未验证时禁用多步表单中的“下一步”按钮如果用户没有在AngularJS的输入字段中输入任何数据,如何禁用按钮?在react.js中点击按钮时如何读取按钮中的值字段如何让JQuery-Button中的文本字段在进入文本字段时不触发按钮
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Python中使用deepdiff对比json对象时,对比时如何忽略数组中多个不同对象的相同字段

一般是用deepdiff进行对比的时候,常见的对比是对比单个的json对象,这个时候如果某个字段的结果有差异时,可以使用exclude_paths选项去指定要忽略的字段内容,可以看下面的案例进行学习:...上面的代码是一般单条数据对比的情况。...那么如果数据量比较大的话,单条对比查询数据效率比较低,因此,肯呢个会调用接口进行批量查询,然后将数据转成[{},{},{}]的列表形式去进行对比,那么这个时候再使用exclude_paths就无法直接简单的排除某个字段了...从上图可以看出,此时对比列表元素的话,除非自己一个个去指定要排除哪个索引下的字段,不过这样当列表的数据比较多的时候,这样写起来就很不方便,代码可读性也很差,之前找到过一个用法,后来好久没用,有点忘了,今晚又去翻以前写过的代码记录...这里对比还遇到一个问题,等回头解决了再分享: 就这种值一样,类型不一样的,要想办法排除掉。要是小伙伴有好的方法,欢迎指导指导我。

91520

封装element-ui表格,我是这样做的

, 数组每一项代表一个字段,可以使用element 列属性的所有属性,以下仅为示例 columns: Object.freeze([ { // 表头显示的文字...> 表格顶部可以添加普通的按钮,也可以添加下拉按钮,同时还可以通过before来配置按钮是否显示,disabled来配置按钮是否禁用,上面完整代码见 https://github.com/snowzijun...表格顶部可以有按钮,行尾也是可以添加按钮的,一起来看看 行操作按钮 一般我们会将一些单行操作的按钮放在行尾,比如编辑,下载等按钮,那如何给行尾配置按钮呢?...最后再来一起看看行编辑 行编辑 比如上例,我希望点击行尾的编辑按钮的时候,可以直接在行上面编辑用户的姓名与性别,如何配置呢?...其他功能 除了上面的功能之外,表格还可以配置其他许多功能,比如 可以指定字段为链接列,需要给列配置link属性 可以通过插槽自定义顶部按钮,行操作按钮,行字段等 可以在按钮区域右侧通过插槽配置其他内容

1.4K40
  • Intellij IDEA 2019 debug断点调试技巧与总结详解

    要创建这样的一个断点,只需单击字段声明中的操作界面左侧的装订线: IntelliJ IDEA字段断点 操作断点 如果您想要在特定的代码行中计算某些内容而不实际停止,则另一个操作可能会很有用。...IntelliJ IDEA临时断点 禁用断点 通过在按住 Alt 的同时点击操作界面左侧的装订线可以快速地禁用任何断点。...Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。...通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。 基本操作 按钮 横排按钮 从左到右依次如下: ?...断点条件设置 通过设置断点条件,在满足条件时,才停在断点处,否则直接运行。 通常,当我们在遍历一个比较大的集合或数组时,在循环内设置了一个断点,难道我们要一个一个去看变量的值?

    5.4K41

    商城项目-商品新增

    那么问题来了:该如何让这几个步骤切换呢? 5.3.3.步骤切换按钮 分析 如果改变step的值与指定的步骤索引一致,就可以实现步骤切换了: ?...组件名:v-select 比较重要的一些属性: item-text:选项中用来展示的字段名,默认是text item-value:选项中用来作为value值的字段名,默认是value items:待选项的对象数组...如何实现? 5.8.2.算法:求数组笛卡尔积 大家看这个结果就能发现,这其实是在求多个数组的笛卡尔积。作为一个程序员,这应该是基本功了吧。...N个数组的笛卡尔积 如果是N个数组怎么办? 不确定数组数量,代码没有办法写死。该如何处理?...优化:这里生成的是SKU的数组。因此只包含SKU的规格参数是不够的。结合数据库知道,还需要有下面的字段: price:价格 stock:库存 enable:是否启用。

    3.5K20

    (长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue

    "baz", "qux"]|function 是可以从其他列表中添加元素,还是可以从中添加元素的组名数组 revertClone:boolean—在移动到另一个列表后,将克隆的元素恢复到初始位置 dragUlKey...handle 选项 为了使列表项可拖动,Sortable可禁用用户的文本选择。这并不总是可取的。...指定以像素为单位的鼠标在被视为拖动之前应移动的距离。如果项目也可以单击,例如在链接列表中,则很有用。 当用户在可排序元素内单击时,在按下和松开之间,您的手通常会略微移动。...默认情况下,此选项为true,这意味着Sortable在应该被隐藏时将从DOM中删除克隆的元素 emptyInsertThreshold 选项 拖动时鼠标必须与一个空的可排序对象之间的距离(以像素为单位...自动滚屏 此插件可让页面在移动设备和IE9上可滚动元素的边缘附近拖动时(或在启用回退时)自动滚动,并且还增强了大多数浏览器的本机拖放自动滚动。

    7.1K10

    JavaScript表单基础

    表单基础 表单在html中以标签元素展示,在js中它用HTMLFormElemnt类型表示。 介绍一下HTMLFormElement类型的属性和方法。...还有一种方法就是直接禁用提交按钮,给它设置一个disabled属性。 表单字段的公共属性 前面提到disabled属性,这个就是禁用。我们看一下表单里面都有什么公共属性。...disabled:布尔值,表示表单字段是否禁用。 form:指针,指向表单字段所属的表单。这个属性是只读的。 name:字符串,这个字段的名字。...readOnly:布尔值,表示这个字段是否只读。 tabIndex:数值,表示这个字段在按 Tab 键时的切换顺序。...对文件输入字段来说,这个属性是只读的,仅包含计算机上 表单字段的公共方法 就俩个哈哈 focus() 表示获取焦点 blur() 失去焦点 我们可以根据需求在js中操作这些内容,反正我感觉是挺好玩的

    1.1K20

    salesforce的功能_salesforce开发

    其实是一个空数组类型,这和空指针是截然不同的两个概念,而测试2Line1声明变量时未实例化,则默认为空。...】: 当我们使用Lead时,明明将Convert按钮添加到了页面布局,但是用户一直看不到转化按钮,这时需要在Profile里面启用Covert Leads,如下图: 65、【如何让<apex:...】:官方文档 | blog 参考 51、【如何在Js/Formula中正确使用Opportunity的HasOpportunityLineItem字段】:在apex中该字段值为Boolean类型 var...- 先禁用profile的enhanced profile user interface,之后在profile的Tab settings中勾上下图1,保存即可。...参见资料:Help And Training Community 44、启用或禁用内联编辑 – 有时候我们希望禁用用户默认的行内编辑功能,直接去user interface中将Enable Inline

    7K20

    React 组件优化

    useReducer 的工作原理与 redux 有些相似,useReducer 返回的数组的第二个参数就像 redux 中的 dispatch,可以派发 action。...state 如果是一个引用类型,比如数组或者对象,当往数组中 push 新的项时,我们必须要克隆一份才行,如果不克隆,react 会认为 state 并没有更新。...使用时需要先下载: npm install formik --save Formik 库可以与 yup 库一块使用,库的作者也推荐搭配使用,yup 是一个用于验证字段的库,它的用法类似于 React 中的...不触发验证,只有 change 事件发生时才触发 validateOnBlur={false} // 提交时就打印出各个字段(action...在 Formik 官网,作者也举例了使用 redux-form 的缺陷: 表单状态本质上是短暂的和局部的,并不需要 redux 对其进行跟踪; 使用 redux 管理状态时,状态更新要派发 action

    7.2K20

    PyQt5 中按钮点击事件重复触发的原因与解决方案

    在这篇博客中,我们将探讨为何按钮点击事件会重复触发,并提供一种有效的解决方案。 问题描述 假设你有一个按钮,在用户点击时应该执行某个操作。理想情况下,每次点击按钮时,事件应只触发一次。...如果在代码中不小心多次连接了同一个槽函数,就会导致每次点击按钮时,槽函数被调用多次。 信号连接的多次触发 在 PyQt5 中,信号与槽的连接是通过 .connect() 方法实现的。...UI 更新导致的副作用 有时,程序的其他部分可能无意间修改了 UI 或更新了按钮状态,导致按钮的点击事件被错误地触发。例如,按钮被禁用或启用时,可能会不小心触发多次信号。...断开旧连接并重新连接信号和槽 在按钮的点击事件连接之前,我们可以先断开任何已存在的连接,然后再连接到目标槽函数。这样可以确保每次点击时,槽函数只会被触发一次。...禁用按钮防止重复点击 另外一个防止多次触发的方法是禁用按钮,直到当前操作完成。点击按钮时,禁用按钮,执行操作后再重新启用按钮,这样就能防止用户在操作过程中多次点击按钮。

    8510

    【新!超详细】Figma组件属性完全指南

    例如,我创建了一个具有三种类型的按钮:主要、次要和再次级。每个都有 4 种状态:启用、悬停、聚焦和禁用。此外,每个都有两个图标,一个在左边,一个在右边,加上一个文本标签。...当您想在另一个组件中交换组件时使用它。例如,当您有一个按钮时,您可以通过属性面板更改按钮内部的图标。 目前,无法交换变体。...如果您希望图标出现在按钮内,请将其切换为 ON (true)。如果没有,请将其切换为 OFF(假) 何时使用布尔属性? 布尔属性非常适合显示和隐藏图层。例如,对于带有和不带有图标的按钮。...例如,创建一个具有不同状态(如启用、悬停和禁用)的按钮。 还有一件事,如果你想使用交互式组件,你必须使用变体。 如何在 Figma 中添加属性? 第一步,您需要创建一个组件。...例如,如果要创建悬停按钮,请将其颜色从启用更改为悬停,并将其命名为悬停。您现在有一个包含两个变体的变体组件集。 如何在 Figma 中编辑属性?

    12.4K22

    【预告:模块化工业PC(早10点开课)】正文: Wincc实现与数据库的交互以及报表的实现方式

    那么对于WINCC软件大家肯定非常熟悉了, 那么,如何将实时数据写入WINCC自带的关系数据库SQL Server,并读出。...DBTEST”,然后建立一个表,如value,表中输入字段,并设置数据格式,如字段名称为 press,temp,他们对应的数据类型都为 float , 此处的字段名称需要与WINCC中变量的名称一致,(...2)wincc 数据写入到数据库 可以使用按钮来将数据写入,在按钮的VBS脚本中输入代码;一般我们常通过全局脚本,周期触发将数据写入(必须在计算机属性—启动选项卡中勾选"全局脚本运行系统") 代码如下(...中读取到变量中,此处的press和temp必须与数据库中的建立的字段一致 Data1=HMIRuntime.tags("press").read Data2=HMIRuntime.tags("temp"...SSRS 开发的简单报表 各种 Chart 各种仪表盘 以上关于 WINCC 在与数据库的数据交互,以及如何使用 SSRS实现强大的报表功能的介绍到此结束。 。。。。。。

    2K10

    VBA实用小程序:禁用启用所有Excel快捷键

    如果你不想使用Excel内置的快捷键,或者不希望你开发的界面因为快捷键而被破坏,你可能会想禁用所有的Excel快捷键。...StartKeyCombination & Key, "" Next Key '禁用StartKeyCombination中每个键与其它键的组合键 For...StartKeyCombination & Key Next Key '启用StartKeyCombination中每个键与其它键的组合键 For I=..."{PGUP}" End Sub 你可以在工作簿打开时禁用所有快捷键,在关闭工作簿时恢复所有快捷键,这需要你在ThisWorkbook模块中放置下面的代码: Private Sub Workbook_BeforeClose...在功能区或者工作表界面放置一个恢复所有快捷键的按钮,单击该按钮可以恢复所有快捷功能,以避免在需要时不方便编辑代码的情形。

    94430

    MongoDB(7)- 文档插入操作

    ,其中一个文档发生错误,MongoDB 将返回而不处理数组中的其余文档(默认) false:无序插入,其中一个文档发生错误,则继续处理数组中的其他文档 三种 insert 方法的返回内容 // 插入单条文档...MongoDB 向集合里插入记录时,无须事先对数据存储结构进行定义,每个文档的数据结构都可以是不同的 如果待插入的集合不存在,则插入操作会默认创建集合 MongoDB 中,插入操作以单个集合为目标 MongoDB...中的所有写入操作都是单个文档级别的原子操作 插入不指定 _id 字段的文档 db.test.insert( { item : "card", qty : 15 }) MongoDB 会自动给它分配一个...Objectld 值与执行操作时的机器和时间有关 插入指定 _id 字段的文档 值 _id 必须在集合中唯一,以避免重复键错误 db.test.insert( { _id: 10, item:...值 插入文档数组 插入的多个文档无须具有相同的字段 db.test1.insert( [ { _id: 11, item: "pencil", qty: 50, type: "

    99420

    FreeSql v0.11 几个实用功能说明

    新功能2:查询子集合表的指定字段 老的 IncludeMany 限制只能查子表的所有字段,子表过段多过的话比较浪费 IO 性能。 新功能可以设置子集合返回部分字段,避免子集合字段过多的问题。...对外部实体的操作只作新增(注意不会更新) 属性集合为空时,删除他们的所有关联数据(中间表) 属性集合不为空时,与数据库存在的关联数据(中间表)完全对比,计算出应该删除和添加的记录 ---- 五、迁移实体...当插入实体/集合实体的时候,忽略了 time 列,代码如下: fsql.Insert(item) .IgnoreColumns(a => a.time) .NoneParameter()...部分中存在的列,在 update 中将以 VALUES(`字段`) 的形式设置; 当 insert 部分中不存在的列,在 update 中将为常量形式设置,当操作实体数组的时候,此常量为 case when...将附加 where 条件; 匹配失败的,标记下次不再匹配,避免性能损耗; 如何禁用?

    1.8K10

    瑞吉外卖-员工管理

    需要注意,employee表中对username字段加入了唯一约束,因为username是员工的登录账号,必须是唯一的 employee表中的status字段已经设置了默认值1,表示状态正常。...账号禁用的员工不能登录系统,启用后的员工可以正常登录。 需要注意,只有管理员(admin用户)可以对其他普通用户进行启用、禁用操作,所以普通用户登录系统后启用、禁用按钮不显示。...如果某个员工账号状态为正常,则按钮显示为“禁用”,如果员工账号状态为已禁用,则按钮显示为“启用”。 # 代码开发 页面是怎么做到只有管理员admin能够看到启用,禁用按钮的?...前面我们已经发现了问题的原因,即js对long型数据进行处理时丢失精度,导致提交的id和数据库中的id不一致。...,跳转到编辑页面,在编辑页面回显员工信息并进行修改,最后点击保存按钮完成编辑操作 # 代码开发 在开发代码之前需要梳理一下操作过程和对应的程序的执行流程: 点击编辑按钮时,页面跳转到add.html,

    1.1K40
    领券