javascript - ReactJs 如果 div 包含 className 将负 tabindex 设置为 childs

Question

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

在 React 中，我使用 props 完成了添加/删除 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 类的所有元素，然后动态更新其所有子元素的 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 您可以通过使用 text1 类单击 div(背景)并尝试按 Tab 键进行测试。您会发现实际上最终跳到了下一个 block 。