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

Question

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

我想要实现的是这样的，如果我单击按钮，文本将被隐藏。我想在不使用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;

Answer 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>

Answer 2

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;

你应该返回一个元素