html - 使用 React 钩子从 HTML 元素中删除/添加类名

Question

我正在尝试使用单击按钮从 html 元素中删除属性：

import React , {useState} from 'react';
import classNames from 'classnames';
function App () {
    const [isActive, setIsActive] = useState(false);

    const handleOnClick = () => {
      setIsActive(!isActive);
    };
    return (
        <InlineBlockLogIn 
               className={classNames('active', { 'active' : isActive})} 
               onClick={handleOnClick} >
        
        <InlineBlockReg 
               className={classNames('', { 'active' : isActive})} 
               onClick={handleOnClick} >
)};

单击 InlineBlockReg 等时，我想从 InlineBlockLogIn 中删除“活动”。所以基本上如果在一个 div 上处于活动状态，它应该在第二个 div 上处于非活动状态。知道该怎么做吗？

Answer 1

您问题中的代码没有单个根元素，缺少结束标记并且处理程序不正确。也许下面的代码可以帮助你：

const App = () => {
  const [isActive, setIsActive] = React.useState(true);
  const handleOnClick = (value) => {
    setIsActive(value);
  };
  return (
    <div>
      <div
        className={isActive ? "active" : ""}
        onClick={() => handleOnClick(false)}
      >
        InlineBlockLogIn
      </div>

      <div
        className={isActive ? "" : "active"}
        onClick={() => handleOnClick(true)}
      >
        InlineBlockReg
      </div>
    </div>
  );
};

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

<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="root"></div>