在React中，如何更改在迭代中创建的一个元素的类名，单击另一个元素？

Question

我正在尝试将一个类添加到一个特定的元素中。用户单击remove按钮，在将“remove”类添加到包含行DIV之后，表中包含该按钮的整行应显示为禁用。使用Array.Map创建了多行。我试了一下：如何使用refs访问/重写元素的className？但是useRef只针对迭代中创建的div的最后一个版本,而useState for conditional className则更改该div的所有迭代。

const AccordionBody = ({...props }) => {
  
  const [data, setData] = useState(null);
  //data is loaded from api
  // set state 
  ...
  const handleRemove = (id) => {
    // ... sending remove ID to api 
    // add class "removed" to grandparent of button
  };

  return (
   {data.list.map((item) => (
          // change this parent div. Tried useRef and conditional className here.
          <div className={`c-table__row`} key={item.id} >
            <div className="c-table__row__item">
              // this is the button triggering the change
              <div className="e-btn__x" onClick={(e) => handleRemove(item.id)}></div>
              <img className="u-img--round" src={item.icon}/>
              <span className="c-table__cell">
                {item.name}
              </span>
            </div>
            <div className="c-table__row__item ">
                {item.location}
            </div>
            //more info in this row
            ...
          </div>
        ))}
}

Answer 1

将行是否被禁用的状态放入状态中的data.list数组。大概是这样的：

{data.list.map((item, i) => (
  // ...
  onClick={(e) => handleRemove(i)

const handleRemove = (index) => {
  setData({
    ...data,
    list: [
      ...data.list.slice(0, index),
      { ...data.list[index], disabled: true },
      ...data.list.slice(index + 1),
    ]
  });
};

然后，在呈现时，使用disabled属性为行指定类名。

<div
    className={`c-table__row${item.disabled ? ' disabled' : ''}`}
    key={item.id}
>