React中按钮重置文件类型Form.Control的TypeScript类型适配问题

问题本质 #

当Form.Control的type="file"时，它的value属性类型限定为string | undefined（对应原生input的value，是浏览器提供的文件安全字符串），而你试图赋值File | null类型，直接触发TypeScript类型不匹配。另外，原生文件输入框不允许通过代码直接设置File对象作为value，只能用空字符串重置。

解决方案 #

方案1：用useRef重置文件输入框（推荐） #

不需要给Form.Control绑定value，通过ref获取DOM元素，在重置时直接清空输入框的value即可，同时维护state记录选中的文件。

修改步骤：

1. 定义一个ref用于获取文件输入框：

const fileInputRef = useRef<HTMLInputElement>(null);

2. 给Form.Control添加ref属性：

<Form.Control
  ref={fileInputRef}
  id="fileInput"
  type="file"
  onChange={(e) => {
    const target = e.target as HTMLInputElement;
    setFile(target.files ? target.files[0] : null);
  }}
/>

3. 更新onReset函数，通过ref重置输入框：

function onReset() {
  setLoading(true);
  setResource("");
  setSelectedProfile("");
  setFile(null);
  // 重置文件输入框的value
  if (fileInputRef.current) {
    fileInputRef.current.value = "";
  }
  setLoading(false);
}

方案2：类型兼容处理（仅过类型检查，不推荐） #

如果非要绑定value，可以把File | null转换为符合要求的类型：当file为null时设置空字符串，其他情况不传value（或设为undefined）。这种方式仅能通过类型检查，无法实现文件选中后的value展示（浏览器限制）。

修改Form.Control的value属性：

<Form.Control
  value={file ? undefined : ""}
  id="fileInput"
  type="file"
  onChange={(e) => {
    const target = e.target as HTMLInputElement;
    setFile(target.files ? target.files[0] : null);
  }}
/>

完整修改后的代码片段 #

const ValidatorHome: FunctionComponent = () => {
  const [resource, setResource] = useState("");
  const [profiles, setProfiles] = useState([] as { name: string, url: string }[]);
  const [selectedProfile, setSelectedProfile] = useState("");
  const [file, setFile] = useState(null as File | null);
  const [loading, setLoading] = useState(false);
  // 添加ref获取文件输入框
  const fileInputRef = useRef<HTMLInputElement>(null);

  const navigate = useNavigate();

  const fhirClient = new Client({
    baseUrl: 'http://localhost:3000/fhir'
  });

  useEffect(() => {
    loadProfiles();
  }, []);

  async function loadProfiles() {
    setLoading(true);
    try {
      const response = await fhirClient.search({
        resourceType: 'StructureDefinition',
        searchParams: {
          "_elements": "name,url",
          "_count": "12222222"
        }
      })
      const results: Bundle = response as Bundle;
      const profiles: { name: string; url: string; }[] = [];
      results.entry?.forEach(e => {
        const profile = e.resource as StructureDefinition;
        profiles.push({ name: profile.name, url: profile.url });
      })
      setProfiles(profiles);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  }

  function onReset() {
    setLoading(true);
    setResource("");
    setSelectedProfile("");
    setFile(null);
    // 通过ref重置文件输入框
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
    setLoading(false);
  }

  return (
    <div>
      <Header title1Key={i18n.t('validator.title')} />
      {loading ? (<>
        <Loader />
        <div className={styles.footerContainer}>
          <Footer />
        </div >
      </>) : (
        <>
          <div className={styles.main}>
            <Form.Group>
              <Form.Label className={styles.formLabel}>
                {i18n.t('validator.labels.fhirResource')}
              </Form.Label>
              <Form.Control
                as="textarea"
                value={resource}
                rows={5}
                placeholder={i18n.t('validator.textarea.placeHolder').trimEnd()}
                type="text"
                onChange={(e) => setResource(e.target.value)} />
            </Form.Group>
            <fieldset id="uploadInput">
              <Form.Group controlId="formFile" className="mb-3">
                <Form.Label className={styles.formLabel}>
                  {i18n.t('validator.labels.uploadResource')}
                </Form.Label>
                <Form.Control
                  ref={fileInputRef}
                  id="fileInput"
                  type="file"
                  onChange={(e) => {
                    const target = e.target as HTMLInputElement;
                    setFile(target.files ? target.files[0] : null);
                  }}
                />
              </Form.Group>
            </fieldset>
            <Form.Group>
              <Form.Label className={styles.formLabel}>
                {i18n.t('validator.labels.selectProfile')}
              </Form.Label>
              <Form.Select
                value={selectedProfile}
                aria-label="Default select example"
                onChange={(e) => {
                  setSelectedProfile(e.target.value);
                }}
              >
                <option>{i18n.t('validator.labels.defaultProfileOption')}</option>
                {profiles.map(profile => getProfileOptions(profile))}
              </Form.Select>
            </Form.Group>
            <div className={styles.buttonsContainer}>
              <Button
                className={styles.validatebutton}
                variant="danger"
                onClick={sendToValidation}
              >
                {i18n.t('validator.button.validate')}
              </Button>
              <Button
                className={styles.resetbutton}
                variant="secondary"
                onClick={onReset}
              >
                {i18n.t('validator.button.reset')}
              </Button>
            </div>
          </div>
          <Footer />
        </>
      )}
    </div >
  );
};

export default ValidatorHome;

内容的提问来源于stack exchange，提问作者Aurélie