从 React 组件中查找并更改具体化生成的 html 个元素

Question

在我的应用程序的几个地方，我有一些我不太引以为豪的代码。我需要找到一些由 materialize 处理的元素来操作它们，以便它们根据我的需要显示。所以我在代码的两个不同部分做了这两件事：

// 1.- set style from grey (placeholder text) to black(input text) and erase placeholder only on 1rst  option select
const dropdownWrapper = document.getElementsByClassName('select-dropdown dropdown-trigger')[0];
dropdownWrapper.setAttribute("style", "color:black;");

// 2.- remove AM PM labels from display
let ampmLabels = document.getElementsByClassName('timepicker-span-am-pm')[0];
ampmLabels.setAttribute("style", "display:none;");

我不考虑 useRef，因为这些元素不属于任何特定组件。当我在我的组件中初始化物化元素时，它们位于 DOM 中，当我在我的组件中初始化物化元素时，它们被物化放在那里，当它们显示时，我从该组件操纵它们以满足我的需要。

据我所知，当我运行解码时不再有这种类型的元素，document.getElementsByClassName('select-dropdown dropdown-trigger')[0]; 可以工作，但是没有更优雅的方法来找到操作 dom 元素来做到这一点？

编辑：

无法更改颜色的组件是具有type="text"属性的输入类型：

html 与 dropdownWrapper.classList.add('text-black');:

<input class="select-dropdown dropdown-trigger text-black" type="text" readonly="true" data-target="select-options-ee9a6017-aef6-ecbf-c2a1-298693b77804">

html 与 dropdownWrapper.setAttribute("style", "color:black;");:

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-ee9a6017-aef6-ecbf-c2a1-298693b77804" style="color: black;">

似乎因此 dropdownWrapper.classList.add('text-black'); 不起作用。这会将 text black 添加到 class="select-dropdown dropdown-trigger text-black" 中的 class 名称（注意末尾的 text-black）但不会更改文本颜色，即使 .text-black {color: black}被添加到 css 文件。

setAttribute 的样式更改，在 html 的末尾生成 style="color: black;"，这似乎是实际改变颜色的内容。

Answer 1

你可以这样做：

function addClass(selector, className) {
  const element = document.querySelector(selector);
  element.classList.add(className);
}

/* maybe move these strings to constants, add comments*/
addClass('.select-dropdown.dropdown-trigger', 'text-black');
addClass('.timepicker-span-am-pm', 'hidden');

微小的改进：

您可以使用document.querySelector()
您还可以在 CSS class 中添加样式并使用 classList API:

长版：

const dropdownWrapper = document.querySelector('.select-dropdown.dropdown-trigger');
dropdownWrapper.classList.add('text-black');

const ampmLabels = document.querySelector('.timepicker-span-am-pm');
ampmLabels.classList.add('hidden');

从 React 组件中查找并更改具体化生成的 html 个元素

Find and change materialize generated html elements from react component

javascript

materialize

reactjs