Question

我有一个这样的带有FieldArray的表单

export type ContactPerson = {
  givenName: string;
  familyName: string;
  phoneNumber: string;
  email: string;
};

该表单允许用户添加许多联系人。

这里是通过{renderFields（）}渲染4个输入字段的组件

export const renderEntries: React.ComponentType<Props> = (props) => {
  const { fields, meta: { error, submitFailed } } = props;
  return (
    <React.Fragment>
      {fields.map<React.ReactNode>((fieldArrayName, index, fieldsReference) => {
        const containerClassNames = {
          first: 0 === index,
          last: index === (fieldsReference.length - 1),
        };
        const topArrowClassNames = {
          top: true,
          hidden: 1 === fieldsReference.length || 0 === index,
        };
        const bottomArrowClassNames = {
          bottom: true,
          hidden: 1 === fieldsReference.length || index === (fieldsReference.length - 1),
        };

        return (
          <ContactPersonOuterContainer key={index} className={classnames(containerClassNames)}>
            <ReorderArrowContainer
              className={classnames(topArrowClassNames)}
              onClick={() => fieldsReference.swap(index, index - 1)}
            ><ArrowIcon/>
            </ReorderArrowContainer>
            <ContactPersonInnerContainer>
              <CloseButton
                className={classnames({ hidden: 1 === fieldsReference.length })}
                size="1rem" onClick={() => fieldsReference.remove(index)}
              />
              {renderFields(fieldArrayName, index)}
            </ContactPersonInnerContainer>
            <ReorderArrowContainer
              className={classnames(bottomArrowClassNames)}
              onClick={() => fieldsReference.swap(index, index + 1)}
            ><ArrowIcon/>
            </ReorderArrowContainer>
          </ContactPersonOuterContainer>
        );
      })}
      <AddButton style={addButtonStyle}
                 onClick={() => fields.push(newEntryPlaceholder)}
      />
    </React.Fragment>
  );
};

export const ContactPersonEntriesFieldArray = FieldArray as new () =>

GenericFieldArray;

当我显示原始表单时，在用户打开它之后。我想显示联系人的一个输入部分，以提示用户。因此，我使用空对象初始化表单初始值以使其可见。

export const newEntryPlaceholder: Partial<ContactPerson> = {};

withProps({
  initialValues: {
    contactPersons: [newEntryPlaceholder],
  },
}),

问题是，如果用户未输入任何信息，我希望在onSubmit中不会获得contactPerson:[{}]：

reduxForm<FormClientAddData>({
  onSubmit: (values, dispatch) => {
    dispatch(addClient(values));
  },
  form: ADD_CLIENT_FORM_NAME,
}),

我一直在寻找对FieldArray进行标准化的方法，但是它不存在。另外，作为最后的选择，我想继续在reduxForm.onSubmit中对其进行标准化。我尝试将undefined分配给newEntryPlaceholder，但我对strictNullChecks遇到了问题，所以无法完成。

如何在没有初始值的情况下显示FieldArray中的第一组空字段？

0 个答案: