首页
学习
活动
专区
工具
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"按钮时,字段数组中被禁用的字段将被启用。你可以根据实际需求进行修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

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

69720

封装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.2K41

    商城项目-商品新增

    那么问题来了:该如何让这几个步骤切换呢? 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.4K20

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

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

    7.1K10

    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

    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中正确使用OpportunityHasOpportunityLineItem字段】:在apex字段值为Boolean类型 var...- 先禁用profileenhanced profile user interface,之后在profileTab settings勾上下图1,保存即可。...参见资料:Help And Training Community 44、启用禁用内联编辑 – 有时候我们希望禁用用户默认行内编辑功能,直接去user interface中将Enable Inline

    6.9K20

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

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

    11.6K22

    【预告:模块化工业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...在功能区或者工作表界面放置一个恢复所有快捷键按钮,单击该按钮可以恢复所有快捷功能,以避免在需要不方便编辑代码情形。

    89630

    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: "

    97420

    瑞吉外卖-员工管理

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

    1K40

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

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

    1.8K10
    领券