Javascript react最终表单中的字段是否可以将自身标记为无效/阻止提交？

我有一个自定义的文件上载字段，一旦选择/删除文件，它会立即上载文件，并返回UUID供以后提交。所以，基本上就是现在大多数网络应用程序在你删除文件时所做的事情，比如Facebook、Twitter等

这对于final form来说非常容易处理——我的字段只需在上传完成后调用final form的onChange函数，将UUID传递给final form

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

下面是一个带有小型虚拟应用程序的codesandbox，它应该为解决该问题提供一个良好的起点：

其想法是，单击“假装开始上载”时，该字段将变为无效，单击“假装完成上载”后，该字段将再次有效

请注意，我正在寻找一种干净的方法来做到这一点，同时保持事物的分离，也就是说，我不希望将此的状态添加到包含表单的组件中，这也是因为验证函数需要是幂等的，因此检查外部状态将像我所展示的那样被破坏

如果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"));

有趣的问题

像这样的怎么样？上载文件时，它会呈现一个始终无效的字段，从而阻止提交

---

不错，虽然我考虑过用一个单独的字段设置一个特殊的值，并用一个验证函数检查该值或类似的东西来做一些非常难看的事情，但我从未想过只有在提交被阻止时才动态呈现字段。我想你的答案正是我想要的：

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