Accessing Elements in React

Accessing Elements in React
0

#1

I just finished the base of the drum machine project and wanted some input on accessing html tags

Currently I am doing this type of way which seems to work with no issue.

handleClick(e) {
    e.target.children[0].play();
    this.setState({
      displayText: e.target.id
    });
  handleKeyPress(e) {
    const checkLetter = /[QWEASDZXC]/.test(e.key.toUpperCase());

    if (checkLetter && !this.state.fired) {
      const key = "#" + e.key.toUpperCase();
      const element = document.querySelector(key);
      element.play();
      this.setState({
        fired: true,
        displayText: element.parentElement.id
      });
    }
  }

However, when researching how to do it references came up and they seem very redundant for something of this scale.


#2

I do not see any issues with what you are doing. What was the suggested method?


#3

In Reacts Docs they show you doing something like this for accessing DOM elements.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
const node = this.myRef.current; /// to access