Question

我是新来的反应者，我正在尝试使用两个不同的按钮来切换身体类别。一个应该使用onClick事件添加一个类，另一个应该删除该类。以下是我的代码示例。

现在在控制台中，我可以看到两次触发该事件，但该类仍然存在。正如我所说的，我是React的新手，所以我知道自己做错了。

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

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

Answer 1

您正尝试像使用普通js或JQuery一样直接修改dom，但这不是意味着应该如何使用反应。 React创建一个由您创建和管理的虚拟dom，然后React为您处理更改页面的过程。

我建议遵循this之类的指南来学习基本的设置和概念（跳到他使用JSX的那一部分）。如果您显示整个组件文件，我可以进一步指出正确的方向。

Answer 2

您想以React方式切换className属性值。

React方法具有状态属性和处理程序功能，该功能将切换状态值，而不是直接（操作方式）直接操作DOM节点。

我建议您先看一下React Main Concepts: Handling events，等到您觉得在React中读到Virtual DOM和Reconciliation时，再舒服一点。

这是怎么做：

const { classNames } = window

class App extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      isToggled: true
    }
    
    this.toggleClass = this.toggleClass.bind(this)
  }
  
  toggleClass() {
    const { isToggled } = this.state
    
    this.setState({
      isToggled: !isToggled
    })
  }
  
  render() {
    const { isToggled } = this.state
    
    const className = classNames({
      'body-fixed': isToggled
    })
  
    return <div className={className}>
      <div>Current `className`: <b>{ className }</b></div>
      <button onClick={this.toggleClass}>Toggle class</button>
    </div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://unpkg.com/classnames@2.2.6/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

Answer 3

我能够使用前面列出的代码。我的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>

这只是现在的开始。谢谢您的投入。

编辑：我愿意提出建议。就像我说的，我是React的新手。

React如何才能添加和删除协同工作？

3 个答案: