Question

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

字符串输入字段：{名称：“ stateCode”，长度：100，标题：“ State”，类型：“ string”，必填：true}

布尔输入字段：{名称：“已修改”，长度：5，标题：“已修改”，类型：“布尔值”，必填：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传递给后端，但从产品的角度来看，我无法拥有该功能。

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

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

或

删除if语句，将其设置为必填字段，但允许传递“ No”，而不是让表单将其读取为无输入。（我相信，由于默认情况下将布尔值初始化为redux值，因此将布尔值初始化为false，它将布尔值读为“ No”（否）并说出它是必需值，但是对此不是100％肯定。只要符合我上面的 aim 的要求，我也可以接受不是上述两种解决方案之一的其他解决方案。

Answer 1

您可以向变量的状态添加值：false并在渲染时将其传递到字段并在字段中添加值= {this.state.chosenvarname} onChange（e）=> {setstate（{chosenvarName = e.value）} 像这样的东西

在React Redux表单

1 个答案: