我目前有一個檔案上傳器，當一個檔案被上傳并點擊保存時，它會呈現一個保存的檔案摘要面板。基本上我想要做的是單擊 DeleteIconSmall 我想從摘要中洗掉檔案名稱。
const SavedDocument = ({ document }: { document: DocumentUploaderFile }) => {
return (
<SavedDocumentWrapper>
<StepCompleteIconSmall />
<SavedDocumentName>{document.name}</SavedDocumentName>
<DeleteIconSmall />
</SavedDocumentWrapper>
)
}
uj5u.com熱心網友回復：
如果您正在尋找一種通用方法，我會提供一個onDelete道具來SavedDocument處理父級中的洗掉。如果您只想document.name根據是否已單擊該圖示進行清除 - 全部在此組件內 - 您需要向圖示添加一個單擊處理程式并存盤跟蹤圖示是否已被單擊的狀態，然后選擇不呈現名稱如果該狀態變數為真。
假設您的洗掉圖示上有一個onClick道具（如果沒有，您可能需要用處理點擊的東西包裝圖示），這樣的事情可能會起作用：
const SavedDocument = ({ document }: { document: DocumentUploaderFile }) => {
const [hasDeletedDocument, setHasDeletedDocument] = useState(false);
return (
<SavedDocumentWrapper>
<StepCompleteIconSmall />
<SavedDocumentName>{hasDeletedDocument ? '' : document.name}</SavedDocumentName>
<DeleteIconSmall onClick={() => setHasDeletedDocument(false)} disabled={hasDeletedDocument} />
</SavedDocumentWrapper>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/526252.html
下一篇：型別'MutableRefObject<HTMLInputElement|undefined>'不可分配給型別'LegacyRef<HTMLInputE