反应钩子切换特定行

Question

请澄清我使用反应钩子切换表格特定行的问题。每当我按下 click.. 它会为每一行打开，默认情况下，表头向右移动，它不是恒定的。

toggleHidden(key) 中的错误。如何更正我的 toggleHidden 功能？

const[isHidden , setIsHidden] = React.useState(true)

const toggleHidden = () => setIsHidden(!isHidden)

const data = [
    {
        "name": "gvf",
        "email": "abc",
        "companyname": "xyz",
        "address": "abcy"
    },
    {
      "name": "abi",
      "email": "dhf",
      "companyname": "dhd",
      "address": "fhfh"
    } 
]
  
     return (
       <div>
        <Row>
          <Col> 
           <table  className="table table-hover table-striped table-sm">
              <thead className="thead-dark">
                 <tr>
                   <th>Name</th>
                   <th>Email</th>
                   <th>CompanyName</th>
                   <th>Address</th>
                  
                 </tr>
                
             </thead>          
      <tbody>  
              
    
                 {data.map((a , key) => (
                   
                    <tr key={a.name}>
                <td><Button onClick = {toggleHidden(key)}>Click</Button>
         {!isHidden && <p>Hello ABIII</p> }
          </td>    
                        <td>{a.name}</td>
                        <td>{a.email}</td>
                        <td>{a.address}</td>
                        <td>{a.companyname}</td>
                     
                    </tr>


                  ))}
              </tbody>
         </table>
    </Col> 
</Row> </div>  

Answer 1

您需要定义特定行 - 映射时：

     {data.map(a => (

      )}

尝试像这样为集合中的每个项目添加关键属性：

        {data.map((a, key) => (
 
        ))}

然后传递给您的项目：

 <tr key={key}>

所以现在每一个都是独一无二的——所以如果你把那个键传递给你的函数：

<Button onClick = {toggleHidden(key)}>

程序应该知道执行toggleHidden函数的具体项目