0

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

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

1 回答 1

0

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

所以，

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

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

为了您的方便，这里是完整的代码框。

于 2021-02-17T04:21:10.367 回答