How to access/override the className of an element using refs?

问题

I have a text and a button.

What I want to achieve is something like this, that if I clicked the Button the Text will be hidden. I want to achieve this without using 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;

回答1:

You can use useRef() hook.

Maintain one ref object which is not a string.

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

// css
.hidden {
  display: none;
}

See Working Sandbox

回答2:

This can be achieved simply, your approach is correct just some few fixes.

You can return only one element in JSX
The ref should be maintained somewhere in JS memory

Check this code and the working codesandbox instance 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>
      </>
    );
  }
}

EDIT! As you asked about dynamically generated refs...

This is what I understood as your requirement... see whether it matches it.

Working sandbox 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>
        ))}
      </>
    );
  }
}

回答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;

You should return a single element tho

来源：https://stackoverflow.com/questions/57781912/how-to-access-override-the-classname-of-an-element-using-refs

标签

reactjs

classname