反应挂钩切换特定行 [英] react hooks toggle for specific row

问题描述

请阐明我使用React钩子切换表中特定行的问题.每当我按下click ..时，它会为每一行打开，并且默认情况下，表头向右移动不是恒定的.

Please clarify my problem of toggle for specific row of the table with react hooks. whenever I press click.. it opens for every row and by default the table head is moving right it is not constant.

toggleHidden(key)中的错误.如何更正我的toggleHidden函数?

Error in toggleHidden(key). How to correct my toggleHidden function?

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>  

推荐答案

您需要定义特定的行-映射时:

you need define the specific row - when You mapping:

     {data.map(a => (

      )}

尝试向集合中的每个项目添加键属性，如下所示:

try add key attribute to every item in collection like this:

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

然后传递给您的物品:

 <tr key={key}>

所以现在每个都是唯一的-因此，如果您将该键传递给函数:

So now every is unique - so if You pass that key to your function:

<Button onClick = {toggleHidden(key)}>

程序应知道哪个特定项目执行 toggleHidden 功能

the program should know which specific item execute toggleHidden function

这篇关于反应挂钩切换特定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！