如何在react中添加类和从按钮中删除类？

Question

我有20个按钮，我想在点击的按钮上应用类.active，其余的都将不活动。假设我单击了按钮1，然后我想向按钮1中添加一个活动类，然后当我单击按钮2时，按钮2将得到一个活动类，而active类将从按钮1中移除。

import React from "react";
const PaginationButtonsList = (props) => {

    const handleClick = (event) =>{
   
    }
  return (
    <div className="pagination-buttons-list">
      <button onClick={handleClick} id="button-1">1</button>
      <button onClick={handleClick} id="button-2">2</button>
      <button onClick={handleClick} id="button-3">3</button>
      <button onClick={handleClick} id="button-4">4</button>
      <button onClick={handleClick} id="button-5">5</button>
      <button onClick={handleClick} id="button-6">6</button>
      <button onClick={handleClick} id="button-7">7</button>
      <button onClick={handleClick} id="button-8">8</button>
      <button onClick={handleClick} id="button-9">9</button>
      <button onClick={handleClick} id="button-10">10</button>
      <button onClick={handleClick} id="button-11">11</button>
      <button onClick={handleClick} id="button-12">12</button>
      <button onClick={handleClick} id="button-13">13</button>
      <button onClick={handleClick} id="button-14">14</button>
      <button onClick={handleClick} id="button-15">15</button>
      <button onClick={handleClick} id="button-16">16</button>
      <button onClick={handleClick} id="button-17">17</button>
      <button onClick={handleClick} id="button-18">18</button>
      <button onClick={handleClick} id="button-19">19</button>
      <button onClick={handleClick} id="button-20">20</button>
    </div>
  );
};

export { PaginationButtonsList };

Answer 1

我想你不想要一个只有普通数字的按钮来显示文本。所以你需要：

1. 创建包含要设置为按钮的所有文本的数组列表。
2. 然后通过映射呈现所有这些，并绑定onClick事件以获取索引。
3. 单击时，应将索引设置为状态，并检查哪个按钮具有该索引，因此应将其设置为active。

。

import React, {useState} from "react";

/* Change this number to any text and add as many as you need */
let buttonText = ['1','2','3','4','5']

const PaginationButtonsList = (props) => {
    const [activeIndex, setActiveIndex] = useState(-1)

    const handleClick = (value) =>{
           setActiveIndex(value)   
    }
  return (
    <div className="pagination-buttons-list">
      {buttonText.map((text,index)=> (
           <button onClick={()=>handleClick(index)} class={index === activeIndex ? "active" :""} id={`button-${index}`}>{text}</button>
        )
    </div>
  );
};

export { PaginationButtonsList };

Answer 2

解决这一问题的一种方法是创建一个按钮对象数组，您可以使用它来配置组件。数组中的每个按钮对象都有定义它的形状{ id: number, text: string, active: boolean }。您可以将该配置添加到状态。

单击按钮时，您可以重置每个按钮的活动值(通过更新当前状态的深度复制)，更新单击按钮的活动值，最后使用更新的数据创建一个新的状态。该新状态将在组件重新呈现时反映在组件中。

该方法还具有以下优点: 1)将按钮配置封装在一个地方而不需要单独的状态；2)不需要硬编码JSX中的所有按钮--您可以通过按钮配置map来使用有用的button组件创建一个按钮数组。

​

const { useState } = React;

// Pass in the button config
function Example({ btnConfig }) {

  // Set state with the config
  const [ btns, setBtns ] = useState(btnConfig);

  // When a button is clicked grab its id from its dataset,
  // make a deep copy of the state resetting all of the active
  // values for each button to false, find the index of the button
  // that was clicked, and then set its active value to true.
  // Finally update the state to re-render the component
  function handleClick(e) {
    const { id } = e.target.dataset;
    const reset = btns.map(btn => ({ ...btn, active: false }));
    const index = reset.findIndex(btn => btn.id === +id);
    reset[index].active = true;
    setBtns(reset);
  }

  // `map` over the state and create JSX using a 
  // Button component passing down the properties from
  // the objects in state as well as a reference to the
  // `handleClick` function
  return (
    <div>
      {btns.map(btn => {
        const { id, text, active } = btn;
        return (
          <Button
            key={id}
            id={id}
            active={active}
            text={text}
            handleClick={handleClick}
          />
        );
      })}
    </div>
  );

}

// Accepts the button props and returns a button. If
// the active value is true then apply the "active" class
function Button({ id, text, active, handleClick }) {
  return (
    <button
      data-id={id}
      onClick={handleClick}
      className={active && 'active'}
    >{text}
    </button>
  );
}

// Create a button config - an array of button of objects
const btnConfig = Array.from({length: 10}, (_, i) => {
  const id = i + 1;
  return { id, text: id, active: false }; 
});

// Pass in the button config to the component
ReactDOM.render(
  <Example btnConfig={btnConfig} />,
  document.getElementById('react')
);

button { margin-right: 0.5em; font-size: 1.2em; border-radius: 5px; padding: 0 0.4em; }
button:hover { cursor: pointer; background-color: #cdcdcd; }
button.active { background-color: lightgreen; }

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

​

Answer 3

您只需要保存状态的单个整数，对应于活动按钮的索引-

​

function App({ buttons = [] }) {
  const [active, setActive] = React.useState(-1)
  const toggle = index => event => setActive(index)
  return <div>
    {buttons.map((b, key) =>
       <button
         className={active == key && 'active'}
         onClick={toggle(key)}
         children={b}
       />
    )}
  </div>
}

ReactDOM.render(
  <App buttons={["","","","",""]} />,
  document.body
)

button { margin-right: 0.5em; font-size: 1.2em; border-radius: 5px; padding: 0 0.4em; }
button:hover { cursor: pointer; background-color: #cdcdcd; }
button.active { background-color: lightgreen; }

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

​

如果要重复单击同一按钮以切换活动关闭，如果单击同一按钮两次，则可以恢复-1的初始-1状态-

​

function App({ buttons = [] }) {
  const [active, setActive] = React.useState(-1)
  const toggle = index => event =>
    setActive(index == active ? -1 : index) // <-
  return <div>
    {buttons.map((b, key) =>
       <button
         className={active == key && 'active'}
         onClick={toggle(key)}
         children={b}
       />
    )}
  </div>
}

ReactDOM.render(
  <App buttons={["","","","",""]} />,
  document.body
)

button { margin-right: 0.5em; font-size: 1.2em; border-radius: 5px; padding: 0 0.4em; }
button:hover { cursor: pointer; background-color: #cdcdcd; }
button.active { background-color: lightgreen; }

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

​