Javascript 如何反应添加和删除一起工作？

我是一个新的反应，并试图切换身体类使用两个不同的按钮。一个应该使用onClick事件添加一个类，另一个应该删除该类。下面是我的代码示例

现在在控制台中，我可以看到事件激发两次，但类仍然存在。正如我所说，我是新的反应，所以我知道我可能做得不正确

bodyFixed() {
    document.body.classList.add('body-fixed');
}

bodyRelative() {
   document.body.classList.remove('body-fixed');
}

---

您正试图直接修改dom，就像使用vanilla js或JQuery一样，但这不是react的用法。React创建您创建和管理的虚拟dom，然后React handle为您更改页面

我建议遵循类似的指南来学习基本的设置和概念（跳到他使用JSX的部分）。

---

如果显示整个组件文件，我可以进一步为您指出正确的方向。

您试图直接修改dom，就像使用vanilla js或JQuery一样，但这是而不是react的用法。React创建您创建和管理的虚拟dom，然后React handle为您更改页面

我建议遵循类似的指南来学习基本的设置和概念（跳到他使用JSX的部分）。

---

如果显示整个组件文件，我可以进一步为您指出正确的方向。

您希望以React方式切换

className

prop值

React方法是使用一个state prop和一个handler函数来切换state值，而不是直接操作DOM节点（您的操作方式）

我建议你看一看，等你觉得读起来舒服一点后再做反应

以下是您如何做到这一点：

const{classNames}=window
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
是的
}
this.toggleClass=this.toggleClass.bind（this）
}
toggleClass（）{
const{isToggled}=this.state
这是我的国家({
isToggled:！isToggled
})
}
render（）{
const{isToggled}=this.state
const className=类名称({
“身体固定”：iStoggle
})
返回
当前'className`:{className}
切换类
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
您希望以React方式切换
类名称
属性值

React方法是使用一个state prop和一个handler函数来切换state值，而不是直接操作DOM节点（您的操作方式）

我建议你看一看，等你觉得读起来舒服一点后再做反应

以下是您如何做到这一点：


const{classNames}=window
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
是的
}
this.toggleClass=this.toggleClass.bind（this）
}
toggleClass（）{
const{isToggled}=this.state
这是我的国家({
isToggled:！isToggled
})
}
render（）{
const{isToggled}=this.state
const className=类名称({
“身体固定”：iStoggle
})
返回
当前'className`:{className}
切换类
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
我能够使用前面列出的代码。我的
onClick
事件定位错误。下面是我使用的代码示例：

bodyFixed() {
  document.body.classList.add('body-fixed');
}  

bodyRelative() {
  document.body.classList.remove('body-fixed');
}


<Toggle>
  {({on, getTogglerProps, setOn, setOff, toggle, showAlert}) =>
  <div>
    <button className="search-icon-top" {...getTogglerProps()}>{on ? <img className="times" onClick={this.bodyRelative} src={require('img/times.svg')} alt=" " /> : <i className="fa fa-search" onClick={this.bodyFixed}></i>}</button>
    <div>
      {on ? <TodaySearchBox /> : ''}
    </div>
  </div>}
</Toggle>

bodyFixed（）{
document.body.classList.add（'body-fixed'）；
}  
bodyRelative（）{
document.body.classList.remove（'body-fixed'）；
}
{（{on，getTogglerOps，setOn，setOff，toggle，showart}）=>
{on？：}
{on？：''}
}

这只是现在的一个开始。谢谢你的意见

编辑：我愿意接受建议。就像我说的，我是个新手。
我能够使用前面列出的代码。我的
onClick
事件定位错误。下面是我使用的代码示例：

bodyFixed() {
  document.body.classList.add('body-fixed');
}  

bodyRelative() {
  document.body.classList.remove('body-fixed');
}


<Toggle>
  {({on, getTogglerProps, setOn, setOff, toggle, showAlert}) =>
  <div>
    <button className="search-icon-top" {...getTogglerProps()}>{on ? <img className="times" onClick={this.bodyRelative} src={require('img/times.svg')} alt=" " /> : <i className="fa fa-search" onClick={this.bodyFixed}></i>}</button>
    <div>
      {on ? <TodaySearchBox /> : ''}
    </div>
  </div>}
</Toggle>

bodyFixed（）{
document.body.classList.add（'body-fixed'）；
}  
bodyRelative（）{
document.body.classList.remove（'body-fixed'）；
}
{（{on，getTogglerOps，setOn，setOff，toggle，showart}）=>
{on？：}
{on？：''}
}

这只是现在的一个开始。谢谢你的意见

编辑：我愿意接受建议。就像我说的，我是一个新的反应者。
您面临的问题是什么？请显示所有代码。在我看来，你的反应根本上是错误的，但我不能指导你不看看你是如何做到这一点的setup@Ty布鲁克斯，你成功实施了吗？您可以查看，我在哪里提供了完整的工作示例，如果您有问题，请随时提问。谢谢。你面临的问题是什么？请出示你所有的代码。在我看来，你的反应根本上是错误的，但我不能指导你不看看你是如何做到这一点的setup@Ty布鲁克斯，你成功实施了吗？您可以查看，我在哪里提供了完整的工作示例，如果您有问题，请随时提问。谢谢。我真的不明白你为什么要把类名保留在州里，而不是作为你所在州的国旗？为什么不使用几乎默认的
classnames
package:）不要忘记在构造函数中绑定
this.toggleClass
，这样它就不会将更改传播到它的所有子级（好吧，这里没有那么重要，dom无论如何都会更改，因为它是一个学习者，所以您可以将它正确地学习到OP:）我真的不明白为什么你要把类名保留在州里，而不是作为你所在州的国旗？为什么不使用几乎默认的
classnames
package:）别忘了在构造函数中绑定
this.toggleClass
，这样它就不会将更改传播到它的子级（好的，不是