首页
学习
活动
专区
工具
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中的文本字段在进入文本字段时不触发按钮
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分52秒

Web网页端IM产品RainbowChat-Web的v7.0版已发布

领券