如何在不影响其余行的情况下在每一行中添加 class 名称？

Question

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

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>
    )
}

Answer 1

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

所以，

const arrayTest = [
    {
      name: "11",
      id: "11",
      deleted: false
    },
    {
      name: "22",
      id: "22",
      deleted: false
    },
    {
      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。

如何在不影响其余行的情况下在每一行中添加 class 名称？

How to add a class name in every row without effect the rest of the rows?

javascript

class-names

jsx

reactjs

array.prototype.map