是否可以使用 useState 挂钩来定位类名？

【问题标题】：Is it possible to target a className using a useState hook?是否可以使用 useState 挂钩来定位类名？
【发布时间】：2019-11-21 01:59:20
【问题描述】：

是否可以在 useState 挂钩中定位类名？ target.className == "test" 是我特别关注的。是否可以查找一个类，如果该类处于活动状态，则隐藏/显示另一个 div 页面元素？

我可能对此很不满意，但正在寻找建议。

// Click tracking of className "test"
const [isSelected, setIsSelected] = useState(true)
const selectToggle = (target.className == "test") =>
  setIsSelected({ ...isSelected, [test]: !isSelected[test] })

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您可以使用useRef 跟踪元素及其引用，检查将记录它跟踪的元素的控制台：

import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [isSelected, setIsSelected] = useState(true);
  const elementRef = useRef();

  useEffect(() => {
    console.log(elementRef.current);
  });

  const toggle = () => setIsSelected(s => !s);

  return (
    <>
      {isSelected && <div ref={elementRef}>Im Tracked</div>}
      <button onClick={toggle}>{`Click to ${
        isSelected ? 'disable' : 'enable'
      }`}</button>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

【讨论】：