javascript - react-final-form 中的字段可以将自身标记为无效/阻止提交吗？

Question

我有一个自定义文件上传字段，一旦您选择/删除文件，它就会立即上传文件，并返回一个 UUID 以供以后提交。所以，基本上现在大多数网络应用程序(例如 Facebook、Twitter 等)在您删除文件时都会执行此操作。

使用 Final-form 处理这一切都很容易 - 我的字段只需在上传完成后调用 Final-form 的 onChange 函数即可将 UUID 传递给 Final-form。

但是，如果用户上传仍在运行时提交表单，他们将提交不带文件 UUID 的表单，因为就最终表单而言，尚未选择任何文件。特别是对于较大的文件，这将是有问题的，因为用户可能没有意识到他们仍然需要等待(即使有加载指示器)。将字段标记为必填也不是一个选项，因为根本不提供文件是有效的(或者该字段可能允许多个文件，或者您正在替换以前上传的文件) - 因此该字段为“无效”的唯一情况"是当前正在上传文件的时间。

这是一个带有小型虚拟应用程序的codesandbox，它应该为任何解决该问题的尝试提供一个良好的起点:https://codesandbox.io/s/polished-fast-k80t7

这个想法是，当点击“假装开始上传”时，该字段变得无效，而在点击“假装完成上传”后，该字段再次有效。

请注意，我正在寻找一种干净的方法来做到这一点，同时保持事物分离，即我不想将其状态添加到包含 Form 的组件中 - 也是因为验证函数需要是幂等的，因此检查外部状态会很困难(如我的 attempt of doing this 所示)。

<小时/>

如果codesandbox链接中断，这里是第一个链接的相关代码(因为无论如何另一个链接只是一个失败的尝试):

import React, { useState } from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field } from "react-final-form";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = async values => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const MyFileUploader = ({ input: { value, onChange }, meta: { invalid } }) => {
  const [isUploading, setUploading] = useState(false);
  const handleStartClick = () => {
    setUploading(true);
  };
  const handleFinishClick = () => {
    setUploading(false);
    onChange("0xdeadbeef"); // let's pretend this is the file UUID ;)
  };
  const style = { color: invalid ? "#f00" : "#000" };
  if (value) {
    return <em style={style}>{value}</em>;
  } else if (isUploading) {
    return (
      <button type="button" onClick={handleFinishClick} style={style}>
        Pretend to finish uploading
      </button>
    );
  } else {
    return (
      <button type="button" onClick={handleStartClick} style={style}>
        Pretend to start uploading
      </button>
    );
  }
};

const App = () => (
  <Styles>
    <h1>React Final Form</h1>
    <Form
      onSubmit={onSubmit}
      initialValues={{ file: null }}
      render={({ handleSubmit, form, submitting, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>File</label>
            <Field name="file" component={MyFileUploader} />
          </div>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
            <button type="button" onClick={form.reset} disabled={submitting}>
              Reset
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </Styles>
);

render(<App />, document.getElementById("root"));

Answer 1

有趣的问题。

这样的事情怎么样？文件上传时，会渲染一个始终无效的字段，从而阻止提交。

const SubmitBlocker = ({ children }) => (
  <Field name="uploading" validate={() => children}>
    {({ meta }) =>
      meta.touched && meta.error ? meta.error : null
    }
  </Field>
);