小编Anx*_*fer的帖子

我使用 React、Redux、TypeScript ant 设计构建了一个简单的表单。按照 ant design 文档，我使用提供的 getFieldDecorator和Form.create方法创建了一个小表单。到目前为止，一切工作正常，在将数据输入字段时，验证是由 ant design 本身处理的。我的主要问题是表单提交。我只想在表单经过验证并且表单因此“有效”的情况下提交数据。

官方文档用于validateFields验证表单并返回一个包含错误的变量并返回进一步的执行，以便表单不会被提交。现在，使用打字稿，我有以下签名： validateFields(): void;<- 我使用此方法在提交表单并随后调用时触发验证getFieldsError(names?: Array<string>): Record<string, string[] | undefined>;

现在，如果您查看示例代码，就会发现丑陋的部分是使用变量“allValid”来检查表单是否有效。我认为如果表单有效，必须有一种更简单的方法来验证和提交数据。

const UploadForm: FunctionComponent<FormComponentProps> = props => {
  const { getFieldDecorator, validateFields, getFieldsError } = props.form;
  const dispatch = useDispatch();

  return (
    <Form
      {...formItemLayout}
      onSubmit={event => {
        event.preventDefault();
        validateFields();
        const validationErrors = getFieldsError();
        let allValid = true;
        console.log(validationErrors);
        for (let key in validationErrors) {
          console.log(validationErrors[key]);
          if (validationErrors[key] !== undefined) {
            allValid = false; …