Question

我才开始反应。我有一个具有输入字段和按钮的组件。还有另一个组件返回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;
}

ReactJS：如何在另一个组件的元素上覆盖一个组件？

1 个答案: