通过ID获取HTML元素并通过React切换其CSS

Question

I have some files that load into my react components, which have HTML code. As it is now, the pure HTML code renders just fine, however there is some 'hidden' code that appears whenever you click certain buttons in other parts of the application or on the text above (think of it like panels that expand when you click on it). The HTML is hidden just using the good old <div id="someId" style="display:none"> .

Anyway I am trying to get the correct panel to expand upon clicking their respective buttons.

So in theory, what I need to do is find the element by id, and switch it's display to block whenever needed, and then switch it back when the parent is clicked again.

Unfortunately I have no idea how to do this and so far have gotten nowhere. As it is now, I have access to the component's ids. What I want to know is how in the world can I access that and get to change whatever is rendering?

Answer 1

Create your function:

function element_do(my_element, what_to_do) {
 document.getElementById(my_element).style.display = what_to_do;
}

and latter in code you can append wherever you want through javascript onclick or not depends what do you need:

element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show

or create yourself toggle:

function toggle_element(element_id) {
      var element = document.getElementById(element_id);
      element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>

Answer 2

The react way to do it would be with states. Assuming that you know how to use states I'd do something like this:

class ShowHide extends React.Component {
  constructor() {
     super();
      this.state = {myState: true};
      this.onClick = this.onClick.bind(this)
  }

  onClick() {
   this.setState({myState: !this.state.myState})  //set the opposite of true/false
  }

  render() {
    const style = {myState ? "display: none" : "display:block"} //if myState is true/false it will set the style
    return (<div>
     <button onClick={this.onClick}>Click me to hide/show me </button>
     <div id="myDiv" style={style}> Here you will hide/show div on click </div>
    </div>)
  }
}