React UploadCare 删除按钮应返回 Null

问题描述

如果使用 uploadcare/react-widget 单击删除按钮，我想让 imageUrl 的值为 null。现在，它没有将该值设置为 null，它仍然返回原始 imageUrl 的值。单击“删除按钮”时如何调用该函数？

                    <Widget
                      tabs="file"
                      name="imageUrl"
                      clearable="true"
                      imagesOnly="true"
                      previewStep="true"
                      value={props.values.imageUrl}
                      onChange={upload =>
                        props.setFieldValue('imageUrl',upload.originalUrl)
                      }
                      publicKey={process.env.UPLOADCARE_KEY}
                    />

解决方法

onChange 回调仅在文件上传时触发。如果您需要处理这种情况，请考虑改用 onFileSelect。例如，

const Example = () => {
  return (
    <Widget
      publicKey={process.env.UPLOADCARE_KEY}
      previewStep
      clearable
      onFileSelect={file => {
        if (!file) {
          console.log("File removed from widget");
          return;
        }
        file.done(fileInfo => {
          console.log("File uploaded: ",fileInfo.cdnUrl);
        });
      }}
    />
  );
};

确保将 react-widget 更新到最新版本 (1.3.7) 才能使用此方法。

基本上，onFileSelect 是对小部件的 vanilla JS API 的 onChange method 的绑定。