ReactJs 如果 div 包含 className 将负 tabindex 设置为 childrens

Question

我是 ReactJs 的新手。我试图避免特定 div 的 <input>、<a> 元素的键盘选项卡焦点事件。如果 div 包含 .text1 class name text1 div 子元素不应获得焦点。

在 React 中我已经完成了 add/remove css className 使用道具。

className={`${style.column5} ${ isActiveDiv ? style.column5Active : style.noTabindex }`}

我使用 jQuery 实现了以下输出。但是，我如何在 ReactJs 中做到这一点？

$(document).ready(function() {
 if ($(".text1").length){
      $(".text1 input, .text1 a").attr("tabindex", "-1");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <div class="text">
  
  </div>
  <div class="text1">
      <input type="text" />
      <a href="#">Anchor Tag</a>
  </div>
  <div class="text2">
      <input type="text" />
  </div>
  <div class="text3">
      <input type="text" />
  </div>
</div>

Answer 1

所以有几种方法可以处理这个问题。静态方法只是将 -1 的 tabIndex 属性传递给那些你不想关注的元素：

<input type="text" tabIndex={-1} />

动态方法是查找所有包含 text1 的 class 的元素，然后动态更新其所有子元素的 tabIndex 属性。你可以尝试这样的事情：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const parentRef = React.createRef();

  useEffect(() => {
    //get children elements
    const refChildren = Object.values(parentRef.current.children);
    //find children with class of text1
    const childrenWithText1Class = refChildren.filter(
      child => child.className === "text1"
    );
    //find children's children to neglect
    const childrensChildren = childrenWithText1Class.flatMap(child =>
      Object.values(child.children)
    );

    const disableList = ["a", "input", "select", "textarea", "button"];

    //neglect children
    childrensChildren.forEach(elem => {
      if (disableList.includes(elem.nodeName.toLowerCase())) {
        elem.tabIndex = -1;
      }
    });
  }, []);

  return (
    <div id="parent" ref={parentRef}>
      <div class="text" />
      <div class="text1">
        <input type="text" />
        <a href="#">Anchor Tag</a>
        <select />
        <textarea />
        <audio controls />
        <button>Check</button>
      </div>
      <div class="text2">
        <input type="text" />
      </div>
      <div class="text3">
        <input type="text" />
      </div>
    </div>
  );
}

查看工作沙箱：https://codesandbox.io/s/elastic-sara-blp9q 您可以通过单击 div（背景）和 text1 class 并尝试使用 Tab 键来测试它。你会发现你实际上最终跳到了下一个块。

ReactJs 如果 div 包含 className 将负 tabindex 设置为 childrens

ReactJs if div contains className set negative tabindex to childrens

javascript

tabindex

reactjs