当我从输入文件中删除多个图像时如何动态更改值

Question

当我预览图像然后删除其中一张时，值保持不变

 const filesRef = useRef(null);

redux 的东西

const initialState = {
    images: [],
};

const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    deleteImg: (state, action) => {
      const payload = action.payload;
      state.images = payload;
    },
  },
});

   <input
          type="file"
          accept="image/*"
          alt="upload image"
          className="product-images-input"
          name="image"
          onChange={e => {
            handleAddImages({ target: e.target });
          }}
          onClick={e => {
            console.log(e.target.value);
            e.target.value = null;
          }}
          multiple
          hidden
          ref={filesRef}
        />

正式地，我可以删除图像，但值保持不变，即使图像被删除我仍然可以上传到云端。如果我在

filesRef.current.value = null

函数中使用

handleDeleteImg

，如果我有一张图像，它会起作用，但如果我有多个图像预览并删除一张，则值将为空。

const handleDeleteImg = i => {
    const newImages = images.filter((_, index) => index !== i);
    dispatch(deleteImg(newImages));
  };

     {images.length > 0 && (
        <div className="uploaded-img-container">
          {images.map(({ url, name }, index) => {
            return (
              <article className="img-content" key={index}>
                <img
                  src={url}
                  alt={name || "default name"}
                  key={index}
                  className="uploaded-img"
                  title={name || "default name"}
                />
                <TiDelete
                  className="delete-img"
                  onClick={() => handleDeleteImg(index)}
                />
              </article>
            );
          })}
        </div>
      )}

Answer 1

这可能是因为文件输入字段的值由浏览器控制，与组件中显示的图像没有直接关系。每次删除图像时，我们都需要强制 React 重新挂载输入元素。通过重新挂载输入元素，其值将自动重置。

添加一个新的状态变量来保存将用于强制重新安装输入元素的键：

const [inputKey, setInputKey] = useState(0);

然后你的文件输入元素要使用这个键

<input
  type="file"
  key={inputKey}
  accept="image/*"
  alt="upload image"
  className="product-images-input"
  name="image"
  onChange={e => {
    handleAddImages({ target: e.target });
  }}
  onClick={e => {
    console.log(e.target.value);
    e.target.value = null;
  }}
  multiple
  hidden
  ref={filesRef}
/>

删除镜像最后，按递增键强制重新挂载

const handleDeleteImg = i => {
  const newImages = images.filter((_, index) => index !== i);
  dispatch(deleteImg(newImages));
  setInputKey(prevKey => prevKey + 1);
};