时间戳

首页 > 解决方案 > ReactJs 如果 div 包含 className 将负 tabindex 设置为 children

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

问题描述

我是 ReactJs 的新手。我试图避免特定 div 元素<input>的键盘选项卡焦点事件。<a>如果 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>

标签： javascriptreactjstabindex

解决方案

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

<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 您可以通过单击类的div（背景）text1并尝试使用选项卡来测试它。你会看到你实际上最终跳到了下一个块。

推荐阅读