javascript - How to Target DOM Elements in ReactJS? - Stack Overflow

admin管理员组

文章数量:1410724

Within my React app, I have a sidebar which needs to have a CSS class added to it when the sidebar close button is clicked. I'm using React.createRef() to create a reference to the element, however, I'm receiving the following error:

Here's my code:

import React from 'react';
import './css/Dashboard.css';

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
    }

    sidebarClose() {
        console.log('test');
        this.sidebar.className += "hidden";
    }

    render() {
        return (
            <div id="dashboard">
                <div ref={this.sidebar} id="sidebar">
                    <img width="191px" height="41px" src="logo.png"/>
                    <div onClick={this.sidebarClose} className="sidebar-close">X</div>
                </div>
            </div>
        );
    }
}

export default Dashboard;

The console.log('test') is just so that I can confirm the function is being executed (which it is).

Thank you.

Within my React app, I have a sidebar which needs to have a CSS class added to it when the sidebar close button is clicked. I'm using React.createRef() to create a reference to the element, however, I'm receiving the following error:

Here's my code:

import React from 'react';
import './css/Dashboard.css';

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
    }

    sidebarClose() {
        console.log('test');
        this.sidebar.className += "hidden";
    }

    render() {
        return (
            <div id="dashboard">
                <div ref={this.sidebar} id="sidebar">
                    <img width="191px" height="41px" src="logo.png"/>
                    <div onClick={this.sidebarClose} className="sidebar-close">X</div>
                </div>
            </div>
        );
    }
}

export default Dashboard;

The console.log('test') is just so that I can confirm the function is being executed (which it is).

Thank you.

• javascript
• reactjs

Share Follow edited Aug 9, 2018 at 8:05 Matt asked Aug 8, 2018 at 15:58 MattMatt 55133 gold badges1010 silver badges2121 bronze badges 2

• 1 You should be using state to control class names (and sidebar state anyways), not refs because the sidebar inherently has state – Andrew Li Commented Aug 8, 2018 at 15:59
• 1 Yeah, check out the NPM classnames package. You should augment your classes in the ponent itself. But for refs, you would need to use this.sidebar.current to access it. But don't do that! :) – mccambridge Commented Aug 8, 2018 at 16:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Instead of manually trying to add a class to a DOM node, you can keep a variable in your state indicating if the sidebar is open and change the value of that when the button is clicked.

You can then use this state variable to decide if the sidebar should be given the hidden class or not.

Example

class Dashboard extends React.Component {
  state = { isSidebarOpen: true };

  sidebarClose = () => {
    this.setState({ isSidebarOpen: false });
  };

  render() {
    const { isSidebarOpen } = this.state;

    return (
      <div id="dashboard">
        <div
          ref={this.sidebar}
          id="sidebar"
          className={isSidebarOpen ? "" : "hidden"}
        >
          <img
            width="191px"
            height="41px"
            src="logo.png"
            alt="craftingly-logo"
          />
          <div onClick={this.sidebarClose} className="sidebar-close">
            X
          </div>
        </div>
      </div>
    );
  }
}

I think you forget to bind sidebarClose method to your class in constructor.

    constructor(props) {
        super(props);
        this.sidebar = React.createRef();
        this.sidebarClose = this.sidebarClose.bind(this); // here
    }

本文标签： javascriptHow to Target DOM Elements in ReactJSStack Overflow