如何在每一行中添加一个类名而不影响其余行？

如何解决如何在每一行中添加一个类名而不影响其余行？

如何在每一行添加一个类名而不影响其余行

import React,{ useState } from 'react';
import './testEfect.css';

const Test = () => {

    const arrayTest = [
        {
            name: '11',id: '11'
        },{
            name: '22',id: '22'
        },{
            name: '33',id: '33'
        },]

    const [state,setState] = useState(false);

    const handleClick = (event) => {
        const newState = event;

        setState(state ? false : true);

    }

    return (
        <div className="App">
            {arrayTest.map((x,index) => {
                return (
                    <ul key={index} className={state ? 'deletEfect' : ''}>
                        <li id={x.id} >
                            {x.name}
                            <button onClick={(event) => handleClick(x.id)}>Delete</button>
                        </li>
                    </ul>
                )
            })}
        </div>
    )
}

解决方法

这里的问题是，当你说 state 是 false 时；它假设整个组件的状态为假。它不会更新行，而是更新整个组件。因此，首先，您需要添加一个删除的属性，该属性将为每一行采用不同的值。

所以，

const arrayTest = [
    {
      name: "11",id: "11",deleted: false
    },{
      name: "22",id: "22",{
      name: "33",id: "33",deleted: false
    }
  ];

  const [state,setState] = useState(arrayTest); //initial state

现在，当你渲染时，你不需要使用那个 arrayTest。但是你需要使用状态。我们不会再接触 arrayTest。所以我们使用，

{state.map((x,index) => {
        return (
          <ul key={index} className={x.deleted ? "testEfect" : ""}>
            <li id={x.id}>
              {x.name}
              <button onClick={(event) => handleClick(x.id)}>Delete</button>
            </li>
          </ul>
        );
      })}

请注意，我们使用 state.map。我们还将 x.id 发送到 handleClick 函数。 为什么？因为我们将使用该 id 来更改对象的删除值。所以我们的 handleClick 变成了，

const handleClick = (id) => {
    const newState = state.map((element) => {
      if (element.id === id)
        return Object.assign({},element,{
          deleted: element.deleted ? false : true
        });
      return element;
    });
    setState(newState);
  };

这只是以不可变的方式更新状态。

为了您的方便，这里是完整的 codesandbox。