ReactJS：如何在另一个组件元素的上方叠加组件？

Question

我刚开始学习React。 我有一个组件，其中包含一个输入字段和一个按钮。 还有另一个组件返回JSX（一个闪烁的点）。我正在将闪烁的点组件导入主组件，并希望在输入字段为空时将闪烁的点覆盖在其上方。

我该如何实现这一点？请在此方面帮助我。

可以在以下位置找到此代码： https://stackblitz.com/edit/react-xmssdv

function App() {
  const [name, setName] = React.useState("");
  const inputChangeHandler = event => {
    setName(event.target.value);
    console.log(name);
  }

  return (
    <div>
        <input type="text" value={name} onChange={inputChangeHandler} />
      <div className="button">
        <button type="button">Click Me!</button>
      </div>

      <Dot />
    </div>
  );
}

- newbie

---

请参考 z-index，您需要一个控制点显示的状态。 - Dennis Vash

如果有东西遮挡了输入框，你该如何访问输入框并输入内容以移除遮挡它的物品？ - Andy

@DennisVash 但是我该如何获取要显示闪烁点的元素位置呢？您能否请看一下代码。当您在输入字段中输入内容时，点会消失，但我该如何将其放置在输入字段的顶部？ - newbie

@Andy 需求是，我想向用户显示一个闪烁的点来提示其在此处输入文本。一旦用户输入了内容，闪烁的点将移到按钮上并在其上闪烁。 - newbie

你的问题的解决方案是你需要回去重新学习CSS。这个问题仅仅是CSS问题，可以用CSS非常容易地解决。我不会写答案，因为你明确表示不想看到任何代码。 - Lazar Momcilovic

@LazarMomcilovic 我卡在这里了，所以才请求帮助。我知道这是CSS和ReactJS，但逻辑对我来说不是很清晰，如果你知道的话，请帮帮我。谢谢。 - newbie

Answer 1

通过进行以下两个更改，可以轻松实现：
步骤1. 在index.js中将Dot组件移动到顶部：

function App() {
  const [name, setName] = React.useState("");
  const [showDot, setShowDot] = React.useState(true);

  React.useEffect(() => {
    name ? setShowDot(false) : setShowDot(true);
  }, [name])

  return (
    <div>
        { showDot ? <Dot /> : null }
        <input type="text" value={name} onChange={() => setName(event.target.value)} />
      <div className="button">
        <button type="button">Click Me!</button>
         { name ? <Dot /> : null }
      </div>


    </div>
  );
}

步骤2：在Dot/dot.css中引入绝对定位的点位置：

.Blink {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

- rakesh-ranjan

---

非常感谢，但问题是我必须动态地改变闪烁点的位置。它最初可以正常工作，但当用户在输入字段中输入内容时，闪烁点应该移到“点击我”按钮上。我该如何实现这一点？ - newbie

好的。我已经根据您的要求对答案进行了更改。试一下吧。希望能有所帮助。 - rakesh-ranjan

还有一件事。目前点号出现在输入框的开头。我们如何将点号放置在输入框的中心？ - newbie