css 允许div中的按钮进行制表符导航,如果div已聚焦？

bqf10yzr 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(163)

我有这样一个组件：（代码沙盒：https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js）

绿色的部分是div。这是我的代码：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [insideApp, setInsideApp] = useState(false);
  return (
    <div onFocus={() => setInsideApp(true)} onBlur={() => setInsideApp(false)}>
      <div className="App">
        <input className="input" />
        {insideApp && <button>Show Button</button>}
      </div>
      <p>Out of Box content</p>
    </div>
  );
}

/* css */
.App {
  display: flex;
  border: 2px solid aqua;
  align-items: center;
  column-gap: 2vw;
  padding: 2rem;
}

.App:focus-within {
  border: 2px solid lime;
}

.input {
  flex: auto;
}

理想情况下，当我通过选项卡导航到按钮时，它应该突出显示，如下所示：

然而，由于我有条件地渲染按钮，我失去了焦点。有人能帮我想出一些创新的想法来实现同样的目标吗？我希望div在聚焦时变成石灰色，然后做一个标签导航，这样它就可以检测输入和按钮。
此外，我希望按钮只显示时，重点是在div。

css

来源：https://stackoverflow.com/questions/75684288/allow-tab-navigation-for-a-button-within-a-div-if-the-div-is-focussed

2条答案

按热度按时间

kulphzqa1#

查看合成事件https://reactjs.org/docs/events.html
有两个事件onMouseEnter和onMouseLeave，您可以使用这两个事件来突出显示div和隐藏按钮。

<div
      onMouseEnter={() => setInsideApp(true)}
      onMouseLeave={() => setInsideApp(false)}
    >
      <div className="App">
        {insideApp ? (
          <div>
            <input className="input" />

            <button>Show Button</button>
          </div>
        ) : null}
      </div>
      <p>Out of Box content</p>
    </div>

赞(0）回复(0）举报 2023-03-09

deyfvvtc2#

你可以使用普通的CSS来处理所有的过程：

import { useState } from "react";
import "./styles.css";

export default function App() {
  // const [insideApp, setInsideApp] = useState(false);
  return (
    <div>
      <div
        className="App">
        <input className="input" />
        <button>Show Button</button>
      </div>
      <p>Out of Box content</p>
    </div>
  );
}

CSS：

.App {
  display: flex;
  border: 2px solid aqua;
  align-items: center;
  column-gap: 2vw;
  padding: 2rem;
}

.App:focus-within {
  border: 2px solid lime;
}

.App button {
  display: none;
  pointer-events: none;
}
.App:focus-within button {
  display: flex;
  pointer-events: auto;
}

.input {
  flex: auto;
}

说明：

1.使用:focus-within来有条件地显示按钮
1.禁用button元素的光标事件，并将其隐藏为默认值以防止交互
1.启用光标事件并在:focus-within激活时显示button

赞(0）回复(0）举报 2023-03-09

我来回答

css 允许div中的按钮进行制表符导航,如果div已聚焦？

2条答案

相关问题

热门标签

最新问答