Итак, я сделал предварительный просмотр изображения, отображаемого на экране, и теперь я создал кнопку, которая должна его удалить. Вот что у меня есть до сих пор:
установить переменную состояния, которая представляет предварительный просмотр:
const [imagePreview, setImagePreview] = React.useState(null);
создать функцию для установки предварительного просмотра для выбранного изображения и передать captureImagePreview
ко входу, который помещает выбранное изображение на экран в качестве предварительного просмотра:
const captureImagePreview = evt => setImagePreview(URL.createObjectURL(evt.target.files[0]));
const revokeImagePreview = () => setImagePreview(URL.revokeObjectURL(imagePreview));
и это блок, в котором предварительный просмотр отображается на экране
{imagePreview ? (
<div className="image-preview">
<img src={imagePreview} alt="" style={{ width: '100%', height: '100%' }} />
<i className="far fa-times-circle" onClick={revokeImageFileAndPreview}></i>
</div>
) : <p>No image</p>}
До этого момента он работает хорошо, но когда я нажимаю на элемент i, чтобы выполнить функцию revokeImagePreview
, чтобы вернуть этот процесс, скачивая, что предварительный просмотр исчезнет с экрана, он не исчезает вообще.
Как я могу сделать превью исчезают при нажатии кнопки?