Question

我需要检查一个图像是否小于 1mb，如果它更大，我必须取消该事件并且不让 react 在输入中设置图像。即使经过验证并满足条件，图像仍被设置为输入。

import { useField, useFormikContext } from 'formik';
import { Snack } from 'bnb-ui/dist'
import { useState } from 'react';

interface InputProps {
  name: string;
  disabled: boolean;
}

export function UploadField({ name, disabled }: InputProps) {
  const [field, mata] = useField(name);
  const { setFieldValue, values } = useFormikContext<any>();
  const [openSnack, setOpenSnack] = useState<boolean>(false);

  const handleChange = (evt: React.FormEvent) => {
    const { files, value } = evt.target as HTMLInputElement;

    if (files && files.length) {
      let file = files[0];
      if (file.size > 1024*1024) {
        setOpenSnack(true);
        return;
      } else {
        setFieldValue(name, value)
      };
    }
  }
}

return (
  <>
    <Snack open={openSnack} onClose={() => setOpenSnack(false)} message="O tamanho da imagem não pode ser superior a 1024Kb" variant="error" />
    <TextField
      disabled={disabled}
      placeholder="aaa"
      inputProps={{ accept: 'image/jpeg, image/png' }}
      type="file"
      variant="outlined"
      fullWidth
      onChange={handleChange}
      size="small"
      error={Boolean(mata && mata.touched && mata.error)}
      helperText={Boolean(mata && mata.touched && mata.error) && mata.error}
    />
  </>
)
}

Answer 1

您可以在表单事件回调中使用 event.preventDefault()，这将防止在用户输入时发生默认操作，在您的情况下是将图像文件设置为输入。这样的事情应该可以工作：

if (file.size > 1024 * 1024) {
  evt.preventDefault();
  // You can do more things here too.
} else {
  // Do whatever u want with your file
}

加载文件时如何取消TextInput的onChange事件？

1 个答案: