使用 useState 更新下一个元素 className答案

【问题标题】：Update the next element className using useState使用 useState 更新下一个元素 className
【发布时间】：2021-05-17 02:33:04
【问题描述】：

我在表格中放置了一个 .map() 以从 API 呈现内容（tr 元素）。在循环的每次迭代中，它都会创建一个选项菜单（查看、编辑、删除）。要打开该菜单，我使用 useState 来更新目标菜单的类名。当我单击一个菜单按钮时会出现问题，所有菜单都在更改类名。有没有办法当你点击一个动作菜单时，只有下一个兄弟元素会改变类名？

normal state

clicked state

 const [toggleOption, setToggleOption] = React.useState(false);

 const handleToggleOption = () => {
   setToggleOption(!toggleOption);
 };

<tbody>
         {list.data.map((item) => {
           if (item.metadata.class === "non-resident") {
             return (
               <tr key={item.id}>
                 <td>{item.name}</td>
                 <td>{item.metadata.birthday}</td>
                 <td>{item.metadata.class}</td>
                 <td>1-20-2021</td>
                 <td className="table__option">
               {/*this is the button menu*/}
                   <button
                     className="table__option__btn"
                     onClick={handleToggleOption}
                   >
                     <span></span>
                     <span></span>
                     <span></span>
                   </button>
                {// this is the menu}
                   <ul
                     className={
                       toggleOption
                         ? "table__option__list active"
                         : "table__option__list"
                     }
                   >
                     <li>
                       <button>View</button>
                     </li>
                     <li>
                       <button>Edit</button>
                     </li>
                     <li>
                       <button>Delete</button>
                     </li>
                   </ul>
                 </td>
               </tr>
             );
           }
           return null;
         })}
       </tbody>

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

您需要为元素创建一个新组件，否则您对每个 tr 元素使用相同的状态。

你的新组件可以是这样的：


const NewComponent = ({item}) => {

  const [toggleOption, setToggleOption] = React.useState(false);

  const handleToggleOption = () => {
    setToggleOption(!toggleOption);
  };

  return (
    <tr key={item.id}>
                 <td>{item.name}</td>
                 <td>{item.metadata.birthday}</td>
                 <td>{item.metadata.class}</td>
                 <td>1-20-2021</td>
                 <td className="table__option">
               {/*this is the button menu*/}
                   <button
                     className="table__option__btn"
                     onClick={handleToggleOption}
                   >
                     <span></span>
                     <span></span>
                     <span></span>
                   </button>
                {// this is the menu}
                   <ul
                     className={
                       toggleOption
                         ? "table__option__list active"
                         : "table__option__list"
                     }
                   >
                     <li>
                       <button>View</button>
                     </li>
                     <li>
                       <button>Edit</button>
                     </li>
                     <li>
                       <button>Delete</button>
                     </li>
                   </ul>
                 </td>
               </tr>

  )

}

然后在你的父组件中，你可以像这样用新组件替换 tr 标签：

list.data.map((item) => {
           if (item.metadata.class === "non-resident") { 
            <NewComponent item={item} /> 
           }

【讨论】：

【解决方案2】：

如果您想以 React 方式执行此操作，您最好使用 useState 方法，而不是布尔值，将该行的 id 或索引传递给状态。

const [toggleOption, setToggleOption] = React.useState(-1);

const handleToggleOption = (index) => {
  setToggleOption(index);
};

然后在你的地图中检查 id/index

 <ul
     className={
     toggleOption===index
                     ? "table__option__list active"
                     : "table__option__list"
                 }
               >

【讨论】：