Question

我想学习reactJS，我知道jQuery，我想知道如何在reactJS中实现下面的jQuery add class remove class函数。

对于像我这样的初学者，任何地方都没有合适的教程，我在这里和那里看到有人使用npm包“ classNames”实现了此目的，但无法理解如何使用它。因此，请有人发布一个简单有效的代码来实现这一目标，以便我学习。

def color2(self): 
    colors2 = ['snow','navajo white','lavender','coral1',
              'conflower','blue','cyan3','spring green', 
              'lightcoral','HotPink2','PeachPuff2','RoyalBlue4', 
              'yellow','orange2','RosyBrown2','SpringGreen2',                                                                
              'AntiqueWhite2','turquoise2','plum2']    
    pick2 = random.choice(colors2)

    #this are buttons
    self.calculator.config(bg=pick2)
    self.btnExit.config(bg=pick2)
    self.btnReceipt.config(bg=pick2)
    self.btnSave.config(bg=pick2)
    self.btnTotal.config(bg=pick2)
    self.btnReset.config(bg=pick2)
    #this are labels
    self.lblCostofDrinks.configure(background=pick2)
    self.lblCostofFood.configure(background=pick2)
    self.lblCostofSnacks.configure(background=pick2)
    self.lblServiceCharge.configure(background=pick2)
    self.lblSubTotal.configure(background=pick2)
    self.lblTotal.configure(background=pick2)
    #this are frames
    self.Buttons_Frame.configure(background=pick2)
    self.RCF.configure(background=pick2)
    self.Receipt_Frame.configure(background=pick2)
    self.MenuFrame.configure(background=pick2)
    self.Food_Frame.configure(background=pick2)
    self.Snacks_Frame.configure(background=pick2)
    self.Drinks_Frame.configure(background=pick2)
    self.Cost_Frame.configure(background=pick2)

-keep class com.facebook.imagepipeline.animated.** { *; }
-keep class com.facebook.imagepipeline.gif.** { *; }
-keep class com.facebook.imagepipeline.webp.** { *; }
-keep class com.facebook.animated.** { *; }

$(document).ready(function(){
    $('.sexSelect').click(function(event){
        $('.sexSelect').removeClass('active');
        $(this).addClass('active');
        event.preventDefault();
    });
});

Answer 1

创建一个布尔值，表示该类是活动的还是不活动的。
这样写节点的className： position: fixed, overflow: hidden
在按钮的className={isMyClass ? 'activeName' : 'inactiveName' }属性中，附加更新布尔值的函数。

例如，您可以使用react钩子实现以下目标：

onClick

Answer 2

您可以使用react钩子的useState存储最后单击的项目，并使用条件三元呈现活动类：

const { useState } = React;

const App = () => {

  const [selected, setSelected] = useState('male')

  return (
    <div className='us-none'>
      <h1>Sex - Click Anyone</h1>
      <span 
        onClick={() => setSelected('male')}
        className={'sexSelect' + (selected === 'male' ? " active" : '')}
      >MALE</span>
      &nbsp;|&nbsp;
      <span 
        onClick={() => setSelected('female')}
        className={'sexSelect' + (selected === 'female' ? " active" : '')}
      >FEMALE</span>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.sexSelect.active {
  color: red;
}

.sexSelect {
  cursor: pointer;
}

.us-none {
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

如何使用reactJS模拟此jQuery行为：从不同的div添加/删除className

2 个答案: