当输入字段获得焦点时，按钮被输入字段隐藏

Question

所以我有这段代码，只要在旁边的文本框中写入一些文本，我就可以显示一个按钮。为此，我使用引导程序和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 的工作 code。你可以试一试，输入一些东西，散焦->按钮瞧。再次单击输入字段，按钮消失。再次散焦，瞧。 onChange 函数改变showAppend 的值。

那么，如何在input 字段顶部显示此按钮？我尝试添加z-index，但没有成功。

Answer 1

您可以查看我的答案。
我已经通过position: relative 完成了。

<div className="input-group-append" style={{ position: "relative", right: 0, zIndex: 100 }} >