React 使用来自另一个标签的 onClick 更改 className 的样式

Question

所以我想使用 h1 标签中的 onClick 更改 div 的 className="myMenu" 的位置 element.To 更具体地说，我有：

<div className="myMenu">
    <button onClick={()=> this.setState({ displayedComponent : Resume})}> Resume </button>
    <button onClick={()=> this.setState({ displayedComponent : Travel})}> Travel </button>
    <button onClick={()=> this.setState({ displayedComponent : Art})}> Art </button>
    <button onClick={()=> this.setState({ displayedComponent : Contact})}> Contact Me </button>
</div>

我想使用

中的 onClick 更改 myMenu 的位置

<h1 onClick={()=> this.setState({ displayedComponent : Carousel}) *Here I would like to add something like document.getElementByClass('myMenu').style.position= 'absolute'* }> No mad Life </h1>.

我想更改 myMenu.style.position 仅使用来自 h1 onClick="..." 的 onClick 事件

我不知道语法应该如何，但我很确定它不会像带有 document.getElementByClass('') 的普通 js 那样工作。style.position = 'absolute' . 谁能告诉我如何操作这个类名的样式？

Answer 1

一个可能的解决方案，用最简单的术语来说，就是根据状态简单地切换或附加某些内容到 myMenu 元素上的 class 名称。

<div className={`myMenu ${this.state.displayedComponent === Carousel ? 'modifier-class' : ''}`}>

然后为修饰符class添加一个css定义，使其绝对定位

React 使用来自另一个标签的 onClick 更改 className 的样式

React change a className's style using onClick from another tag

css

classname

reactjs