在 React Redux 表单上设置初始值字段

Question

我已经渲染了一个动态字段的 redux 形式，它接受来自用户的字符串输入，或者一个布尔值，它是一个选择字段，它有一个下拉菜单，用户可以在其中选择是或否。 Redux 表单值将布尔字段初始化为 false。下面的代码需要一个对象，通过传递这些对象的数组来动态呈现 redux 字段：

字符串输入字段：{name: "stateCode", length: 100, title: "State", type: "string", required: true}

布尔输入字段：{name: "amended", length: 5, title: "Amended", type: "boolean", required: true}

后端代码从数据库中获取这些对象的数组并将它们发送到前端。对象数组根据用户填写的 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
    };

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

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

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

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

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

或

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

Answer 1

您可以将变量添加到具有值的状态： false 并在渲染时将其传递给字段并在字段组件中添加值 ={this.state.chosenvarname} onChange(e) = > {setstate({chosenvarName = e.值）} 类似的东西