0

我正在做一个项目，在该项目中，我映射了从 1 到 90 的数字列表，并为每个数字返回了一个按钮，因此当我单击特定按钮时，颜色会发生变化，而当我再次单击时，颜色会消失。所以这是我的问题，我需要在单击按钮时将该按钮中的数字添加到列表中，并且颜色发生变化，然后在再次单击按钮并且颜色恢复正常时将其从列表中删除。这是我在单击时为按钮添加颜色并在再次单击时删除颜色所做的代码库。

    import React from 'react';
    import './style.css'; 
    export default function App() {
      const [activeNums, setActiveNums] = React.useState({});
        let nums = []
        for (let i = 1; i < 91; i++) {
            nums.push(i)
        }
      const onToggle = (num) => {
        setActiveNums((state) => {
          return {
            ...state,
            [num]: !state[num],
          };
        });
      };
      return (
        <div>
          {nums.map(i => {
              return <button key={i} name={!activeNums[i] && 'ready'} onClick={(e) => 
              handleClass(i, e)} className={`${activeNums[i] ? 'game_clicked' : ''} 
              game_btn `}>{i}</button>
          })}
        </div>
      );
    }
4

2 回答 2

0

因此，据我所知，您希望拥有按钮，您可以单击/取消单击并将按钮编号添加到某个对象。可以这样做：

// import React from "react";

const App = () => {
  const [activeNums, setActiveNums] = React.useState({});

  const buttonHandler = ({ target: { name } }) => {    
    setActiveNums({ ...activeNums, [name]: !activeNums[name] });
  };

  return (
    <div>
      {[...Array(10)].map((_, idx) => {
        const number = idx + 1;
        return (
          <button key={number} name={number} onClick={buttonHandler}>
            My number is: {number} <br />I am{" "}
            {activeNums["" + number] ? "" : "not"} ready.
          </button>
        );
      })}
      <div>{JSON.stringify(activeNums)}</div>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));
<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="root"></div>

于 2021-09-25T11:17:44.660 回答
0 
/* I think this is what you were going for, hope this helps - */

    import React from "react";
    import "./styles.css";
    
    export default function App() {
      const [activeNums, setActiveNums] = React.useState([]);
      let nums = [];
      for (let i = 1; i < 91; i++) {
        nums.push(i);
      }
    
      const onToggle = (num) => {
        setActiveNums((prevState) => {
          if (prevState.includes(num)) {
            return [...prevState.filter((n) => n !== num)];
          } else {
            return [...prevState, num];
          }
        });
      };
    
      return (
        <div>
          {nums.map((num) => {
            return (
              <button
                key={num}
                onClick={(e) => onToggle(num)}
                className={activeNums.includes(num) ? "game_clicked" : ""}
              >
                {num}
              </button>
            );
          })}
        </div>
      );
    }
于 2021-09-25T11:18:59.160 回答