我有一個按鈕，
<div
key={index}
className='flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm'
>
<span className="pr-2">{tag}</span>
<button>
<XCircleIcon className="h-4" />
</button>
</div>
看起來像這樣，
當單擊<按鈕>元素時，我正在嘗試洗掉整個<div>元素。我怎樣才能做到這一點？
我向這樣的按鈕添加了一個事件，
<div
key={index}
className='flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm'
>
<span className="pr-2">{tag}</span>
<button onClick={handleRemoveClick}>
<XCircleIcon className="h-4" />
</button>
</div>
并通過以下Handleremoveclick功能，
function handleRemoveClick(event: MouseEvent<HTMLButtonElement>) {
const target = event.target as SVGPathElement
const removingText = target.parentElement!.parentElement!.parentElement!.children.item(0)!.innerHTML
setTags(prev => (prev?.filter(tag => tag !== removingText)))
}
但這只有在單擊按鈕的白色彩色部分時才有效，而不是紅色彩色部分。然后我環顧四周，發現event.target改變了，這取決于我點擊按鈕的位置。解決方案我想到了是添加一個if else弄清楚我點擊的地方。
那么，有更好的方法來做到這一點嗎？
uj5u.com熱心網友回復：
這里有一個簡單的解決方案，以隱藏點擊按鈕
export default function App() {
const [hideButton, setHideButton] = useState(false);
return (
<div className="App">
{hideButton ? null : (
<div
key={index}
className="flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm"
onClick={() => setHideButton(true)}
>
<span className="pr-2" onClick={(e) => e.stopPropagation()}>{tag}</span>
<button>
<XCircleIcon className="h-4" />
</button>
</div>
)}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452201.html
上一篇：有一種正確的方法可以在表單中放置欄位集的“標題”嗎？
下一篇：獲取HTML元素屬性的型別