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

Question

所以我有这段代码，它使我能够在按钮旁边的文本框中写入一些文本时显示一个按钮。为此，我使用 bootstrap 和 input-group-append class。我之前遇到过一些问题，我已经设法解决了其中的一些问题，但现在我偶然发现了新的不良行为。即，如果在同一文本字段中写入内容，则文本字段旁边应显示一个按钮。但是，如果我写东西，按钮不会弹出。如果我散焦我的文本字段，按钮就会出现。再次聚焦，即点击它，按钮再次隐藏，它就像这样。这是我使用的代码：

<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 }} >

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

Button gets hidden by an input field when the input field is focused

css

button

reactjs

react-bootstrap

bootstrap-4