javascript - 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>
  );
}

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