如何使用 refs 访问/覆盖元素的 className？答案

【问题标题】：How to access/override the className of an element using refs?如何使用 refs 访问/覆盖元素的 className？
【发布时间】：2020-01-06 23:09:19
【问题描述】：

我有一个文本和一个按钮。

我想要实现的是这样的，如果我点击按钮，文本将被隐藏。我想在不使用 state 的情况下实现这一点。

class Test extends Component {
    constructor(props){
        //codes
    }

    hide = () => {
        const span = this.refs.spanLoading;
        span.ClassName = "hidden";
    }

    render() {

        return (
            <span ref="spanLoading" id="test-id" className="">The Quick Brown Fox.</span>

            <button onClick={() => this.hide()}>Hide</button>
        );
    }
}

export default Test;

【问题讨论】：

ref 会给你 dom 元素。然后，您可以使用 span 的 classList 属性。您可以使用 span.classList.add("hidden") 添加隐藏类

标签： reactjs classname

【解决方案1】：

你可以使用useRef()钩子。

维护一个ref 对象，它不是字符串。

const {useRef} = React;

function App() {
  const ref = useRef(null);
  const onClick = () => {
    const span = ref.current; // corresponding DOM node
    span.className = "hidden";
  };
  return (
    <div>
      <span ref={ref} className="">The Quick Brown Fox.</span>
      <button onClick={onClick}>Hide</button>
    </div>
  );
}

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

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

好的，请稍等。
隐藏 = () =>{ const span = this.refs.spanLoading; // 我不知道如何在这里调用 ref。 span.ClassName = "隐藏"; } table = () =>{ tableDetail = Object.keys(postD).map((i) => (

{ postD[i].title }

{ postD[i].content }
The Quick Brown Fox. --> ref就像 ref="ref-1" 和 ref="ref-2" 和 ref="ref-3" 等等..
} render(){ return ( {this.table()} >); }

【解决方案2】：

这可以很简单地实现，你的方法是正确的，只是一些修复。

在 JSX 中只能返回一个元素
ref 应该保存在 JS 内存中的某个地方

检查此代码和工作代码框实例here

class Test extends React.Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
  }

  hide = () => {
    console.log(this.inputRef);
    this.inputRef.current.style.visibility="hidden";
  };

  render() {
    return (
      <>
        <span ref={this.inputRef} id="test-id" className="">
          The Quick Brown Fox.
        </span>
        <button onClick={() => this.hide()}>Hide</button>
      </>
    );
  }
}

编辑！正如您询问动态生成的参考...

这是我理解的你的要求……看看是否符合。

工作沙盒here

class Test extends React.Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
    this.refCollection = {};
    for (let id = 0; id < 10; id++) {
      this.refCollection["id_" + id] = React.createRef();
    }
  }

  hide = e => {
    console.log(this.inputRef);
    this.inputRef.current.style.visibility = "hidden";
  };

  hideInCollection = k => {
    let changedRef = this.refCollection[k];
    changedRef.current.style.visibility = "hidden";
  };
  render() {
    return (
      <>
        <span ref={this.inputRef} id="test-id" className="">
          The Quick Brown Fox.
        </span>

        <button onClick={() => this.hide()}>Hide</button>
        {Object.keys(this.refCollection).map(k => (
          <div>
            <span ref={this.refCollection[k]} id="test-id" className="">
              Looped the Quick Brown Fox
            </span>
            <button onClick={() => this.hideInCollection(k)}>Hide</button>
          </div>
        ))}
      </>
    );
  }
}

【讨论】：

我可以有动态参考吗？示例我有一个循环，然后我的 ref 是 id..
@larp 现在检查答案

【解决方案3】：

class Test extends Component {
    constructor(props){
        this.hide = this.hide.bind(this);
    }

    hide() {
        this.span.classList.add("hidden");
    }    

    render() {

        return (
          <div>
            <span ref={(el) => { this.span = el; }} id="test-id" className="">The Quick Brown Fox.</span>

            <button onClick={this.hide}>Hide</button>
          </div>
        );
    }
}

export default Test;

您应该返回单个元素

【讨论】：

{ postD[i].title }