React 中只有一个活动按钮

Question

我有一个按钮列表。我想让其中之一处于活动状态，而当其中一个处于活动状态时，其他人不应该处于该状态。所以样式只适用于活动的。我几乎做到了，我的意思是当我互相按下时它会改变样式，但我不知道如何让它在我点击另一个按钮时停用按钮。

下面是我的代码。 props.planets 是 object {id: 'name', title: 'name'}

的数组

MenuList 它需要一个 props.planets 并生成 MenuButton 组件列表

const MenuList = (props) => {
  return (
    <ul className={classes.planet_list}>
      {props.planets.map((planet) => (
        <MenuButton key={planet.id} title={planet.title}  />
      ))}
    </ul>
  );
};

MenuButton 是我的按钮组件，我希望它有模块 classes: modulebutton 作为主要样式，class 基于标题，如果按钮处于活动状态，则为活动 class

const MenuButton = (props) => {
  const [active, setActive] = useState();

  const clickHandler = () => {
    setActive({ active: props.title });
  };

  return (
    <li>
      <div
        className={`${classes.menubutton} ${classes[props.title]} ${
          active && classes.active
        }`}
        onClick={clickHandler}
      >
        {props.title}
      </div>
    </li>
  );
};

Answer 1

您需要在父组件而不是子组件中具有活动状态

MenuList.js

const MenuList = (props) => {
  const [active, setActive] = useState();

function activeButton(value){
   setActive(value)
}
  return (
    <ul className={classes.planet_list}>
      {props.planets.map((planet) => (
        <MenuButton onChange={activeButton} disabled={active} key={planet.id} title={planet.title}  />
      ))}
    </ul>
  );
};

MenuButton.js

const MenuButton = (props) => {

  const clickHandler = (keyID) => {
    props.onChange(keyID)
  };

  return (
    <li>
      <div
        className={props.active === props.key ? "activeClass" : "inactiveClass"}
        onClick={() => clickHandler(props.key)}
      >
        {props.title}
      </div>
    </li>
  );
};

应该是这样。可能需要一个 useEffect 但让我知道任何错误

Answer 2

按钮激活状态最简单的解决方案之一。为此，您需要处于活动状态。希望这对您有所帮助！

const {useState,Fragment} = React;

const App = () => {
  const [active, setActive] = useState("");
 
  const handleClick = (event) => {
    setActive(event.target.id);
    
  }

    return (
      <Fragment>
      <button
        key={1}
        className={active === "1" ? "active" : undefined}
        id={"1"}
        onClick={handleClick}
      >
        Solution
      </button>

       <button
       key={2}
       className={active === "2" ? "active" : undefined}
       id={"2"}
       onClick={handleClick}
     >
      By
     </button>

      <button
      key={3}
      className={active === "3" ? "active" : undefined}
      id={"3"}
      onClick={handleClick}
    >
        Jamal
    </button>
</Fragment>

    );
}


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

.active{
background-color:red;
}

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

React 中只有一个活动按钮

Only one active button in React

state

reactjs