代码之家 › 专栏 › 技术社区 › brooksrelyt Ozal Zarbaliyev

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

jsx reactjs javascript

brooksrelyt Ozal Zarbaliyev · 技术社区 · 6 年前

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

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

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

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

3 回复 | 直到 6 年前

Jordan Enev 6 年前

你想切换一个 className 以反应的方式支持值。

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

我建议你去看看 React Main Concepts: Handling events 等你觉得读起来舒服一点的时候 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>

SpeedOfRound 6 年前

您正试图像使用vanilla js或JQuery一样直接修改dom,但这是错误的不

我建议你跟随这样的导游 this 学习基本设置和概念(跳到使用JSX的部分)。

brooksrelyt Ozal Zarbaliyev 6 年前

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

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

编辑:我愿意接受建议。就像我说的,我是新来的。