React - 通过单击更改样式组件

Question

How can I implement CSS change(colors... font-size... etc) with click without toggling?

menu_button.addEventListener('click', ()=>{
    bar.style.visibility = 'visible';
})

like this javascript, I just implement it just one side but I could not find how to do like this.

All reacts examples with css changes that I show implements with state...

visibility: ${props => props.isHidden ? 'visible' : 'hidden'};

<NavList isHidden={navClicked}></NavList>
<SubNavButton
  onClick={()=>{
    console.log(navClicked);
    setnavClicked(!navClicked);
  }}
> 
</SubNavButton>

just like this. I just want to do it without toggle.

Answer 1

It's actually very easy. Using your example:

<NavList isHidden={navClicked}></NavList>
  <SubNavButton onClick={()=>{
    console.log(navClicked);
    setnavClicked(false); //set it one way, so state won't change when you click again.
  }}> 
</SubNavButton>

Answer 2

You will need to use a state variable for this, as the state of the component will change with the click of the button.

If you want to set the visibility of NavList in the onClick event handler of SubNavButton, then you will have to use a state variable for the style property of the NavList. so the initial value of state variable 'visibility' can be 'visible' and onClick it can be set to 'hidden'.

NavList can then be

<NavList style= {{visibility: ${this.state.visibility} }} >