所以我有這個代碼，只要在旁邊的文本框中寫入一些文本，我就可以顯示一個按鈕。為此，我使用引導程式和input-group-append類。我之前遇到過一些問題，我已經設法解決了其中的一些問題，但現在我偶然發現了新的不良行為。也就是說，如果在同一文本欄位中寫入了某些內容，則文本欄位應在其旁邊顯示一個按鈕。但是，如果我寫一些東西，按鈕就不會彈出。如果我對文本欄位進行散焦，則會顯示該按鈕。再次聚焦，即點擊它，按鈕再次隱藏，它的作用是這樣的。這是我使用的代碼：
<div className="input-group" style={{ position: "relative" }}>
<input
type="text"
className="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
onChange={onChange}
/>
{showAppend === true && (
<div
className="input-group-append"
style={{ position: "absolute", right: 0, zIndex: 2 }}
>
<span className="input-group-text" id="basic-addon2">
@example.com
</span>
</div>
)}
</div>
這是來自 CodeSandbox的作業代碼。你可以嘗試一下，輸入一些東西，散焦 -> 按鈕就是這樣。再次單擊輸入欄位，按鈕消失。再次散焦，瞧。該onChange函式更改 的值showAppend。
那么，如何在input欄位頂部顯示此按鈕？我嘗試添加，z-index但沒有用。
uj5u.com熱心網友回復：
你可以看看我的回答。
我已經做到了position: relative。
<div className="input-group-append" style={{ position: "relative", right: 0, zIndex: 100 }} >
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/365649.html
標籤：css 反应 按钮 bootstrap-4 反应引导
下一篇：無法使用xml和資料系結啟用按鈕