在 React Redux Form 上设置初始值字段

Question

我已经渲染了一个 redux 形式的动态字段，它接受来自用户的字符串输入，或者一个布尔值，它是一个 select 字段，它有一个 drop-down 菜单，用户可以 select 是或否。 Redux 表单值将布尔字段初始化为 false。以下代码采用 object 通过传递这些 object 的数组来动态呈现 redux 字段：

字符串输入字段：{名称："stateCode"，长度：100，标题："State"，类型："string"，要求：true}

布尔输入字段：{名称："amended"，长度：5，标题："Amended"，类型："boolean"，要求：true}

后端代码从数据库中获取这些 object 的数组，并将它们发送到前端。 objects 的数组根据用户填写的 250 个不同表单中的哪一个而不同，每个表单都有 80 个可能字段的子集，这些字段是该表单的要求。以下代码是我如何创建表单字段并验证用户输入的：

const booleanMenuItems = [
      <MenuItem key = {0} value={ false } primaryText={"No"}></MenuItem>,
      <MenuItem key={1} value={true} primaryText={"Yes"}></MenuItem>
    ];


    const additionalEdiFields = this.props.ediAdditionalFields == null ? null : this.props.ediAdditionalFields.map(field =>
        {
            if(field.type == "string"){
                return <Field
                    key = {field.name}
                    name = {field.name}
                    component={ TextField }
                    floatingLabelText= {field.title}
                    floatingLabelStyle={ styles.floatingLabelStyle }
                    style={styles.extraFields}
                >
                </Field>
            }
            if(field.type == "boolean"){
                return <Field
                    key = {field.name}
                    name = {field.name}
                    component = {SelectField}
                    floatingLabelText= {field.title}
                    floatingLabelStyle={ styles.floatingLabelStyle }
                    style={styles.extraFields}
                >
                    {booleanMenuItems}
                </Field>
            }
        }
    );


const validate = (values, state) => {

  const errors = {};

  let additionalEdiFields = state.ediAdditionalFields == null? [] : state.ediAdditionalFields.map((extraField) => {
      return extraField;
  });
  const requiredFields = [
    {name: "legalEntityId", length: 32, title: "Legal Entity Id", type: "string", required: true},
    {name: "stateCode", length: 100, title: "State", type: "string", required: true},
    {name: "filingFormName", length: 100, title: "Return", type: "string", required: true},
    {name: "filingFrequencyId", length: 100, title: "Filing Frequency", type: "string", required: true},
    {name: "dueDayOfFilingPeriod", length: 100, title: "Due Date", type: "string", required: true},
    {name: "defaultAssignedTo", length: 100, title: "Assigned To", type: "string", required: true},
    {name: "filingType", length: 100, title: "Filing Type", type: "string", required: true},
    {name: "paymentType", length: 100, title: "Prepayments", type: "string", required: true},
    {name: "effectiveDateMonth", length: 2, title: "Effective Month", type: "string", required: true},
    {name: "effectiveDateYear", length: 4, title: "Effective Year", type: "string", required: true},
    {name: "hasNoExpirationDate", length: 20, title: "Has No Expiration Date", type: "string", required: true}
  ];

  let allFields = additionalEdiFields.concat(requiredFields);

    allFields.forEach((field) => {
        if(field != undefined) {
            if (!values[field.name]) {
                if (field.required == true) {
                    if (field.name === 'hasNoExpirationDate' && !values.expirationDateMonth) {
                        errors.expirationDateMonth = 'Required';
                    }
                    if (field.name === 'hasNoExpirationDate' && !values.expirationDateYear) {
                        errors.expirationDateYear = 'Required';
                    }
                    if (field.name !== 'hasNoExpirationDate' && field.type != "boolean") {
                        errors[field.name] = 'Required';
                    }
                }
            }
            if (values[field.name]) {
                if (values[field.name].length > field.length) {
                    errors[field.name] = 'Too Long';
                }
            }
        }
    });
    
    return errors
    };

加载表单时，我希望所有布尔字段默认在 select 字段中显示 'No'，除非用户将其更改为 'Yes'。按照目前的情况，呈现表单时，所有字段都是空白的。如果用户根本没有为布尔字段输入任何内容，他们仍然可以单击保存，这会将该字段的值 false 发送到后端。

如您所见，'Amended' 字段设置为我手动输入的 'No'。我希望表单加载时 'No' 显示在 select 字段中，而不是默认情况下为空白。 我的真正目标是不允许保存此表单，除非用户在其中一个布尔字段中输入了是或否。一种解决方法是（这就是我的代码的方式）之前），我没有对必填字段的最后一个 'if' 语句进行布尔检查：field.type != "boolean"

当我省略这部分代码时，用户无法在没有 select 是或否的情况下保存表单，否则该字段将以红色突出显示，并在其下方显示 required 字样（查看该字段传输批次 ID，我将其留空并尝试保存）。但是，在这种情况下，selecting 'No' 不起作用。系统给了我所需的错误，即使输入 'No' 是 selected。因此，为什么我添加了 if 语句。但是现在，他们可以一起省略对该字段的输入。虽然它仍然会成功地将 'No' 或 false 传递给后端，但从产品的角度来看我无法拥有该功能。

我需要两种解决方案之一：

加载在这些字段上显示 'No' 的页面（即使它只是文本或带有 css 的视觉内容）。该值仍然可以为空白，无论如何都会传递 false，这就是为什么我想让它显示 'No'）。旁注：如果我在没有输入的情况下保存字段字段。然后进入该表单的编辑面板，'No' 在页面加载时显示为先前的用户输入。这是因为它正在读取上一个用户输入的状态。也许有一种方法可以在表单的初始创建时填充该状态，但字段是动态的。也许求助于 80 个可能字段的所有可能布尔字段的硬编码列表是唯一的方法，但我想避免这种方法。

或

删除 if 语句，将字段设为必填，但允许传递 'No' 而不是让表单将其读取为无输入。（我相信因为布尔值默认初始化为 false 到 redux 值，它正在读取 'No' 作为无值并说它是必需的，但不是 100% 确定这一点）。只要满足我上面的目标，我也愿意接受不属于这两个之一的其他解决方案。

Answer 1

你能不能给状态添加一个值为 false 的变量，然后在渲染时将它传递给字段并在字段组件中添加值 ={this.state.chosenvarname} onChange(e) = > {setstate({ chosenvarName = e.value)} 类似的东西

在 React Redux Form 上设置初始值字段

Set initial values fields on React Redux Form

javascript

redux

react-redux-form