使用钩子切换特定行答案

【问题标题】：Toggle specific row with hooks使用钩子切换特定行
【发布时间】：2020-11-21 01:58:37
【问题描述】：

toggleHidden(key) 中的错误 [错误：期望 0 args 但得到 1] 。请建议使用特定行的键进行更正。

code

  const [isOpen, setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

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={key}>
            <td><Button onClick = {toggleHidden}>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>

) }

【问题讨论】：

这个问题似乎与您的其他问题react hooks toggle for specific row 没有足够的不同。如果您还有其他问题或尚未解决，请更新原始问题。

标签： reactjs react-hooks row toggle collapse

【解决方案1】：

只需将状态更改为数组并在切换时将“pop”/“push”键放入其中，然后声明一个接受键的 curried 处理程序，并执行适当的切换逻辑。我删除了isOpen 状态，因为它没有在示例中使用，但是您可以像更改isHidden 状态和切换器一样更改它：

const [ isHiddenList, setIsHiddenList ] = React.useState([])
const toggleHidden = key => () => {
        setIsHiddenList(
            isHiddenList.includes(key)
                ? isHiddenList.filter(existingKey => existingKey !== key)
                : [ ...isHiddenList, key ]
        );
};

const data = [
    {
        "key": "1"
        "name": "gvf",
        "email": "abc",
        "companyname": "xyz",
        "address": "abcy"
    },
    {
        "key": "2"
        "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(({ key, name, email, companyname, address }) => {
                                const isHidden = isHiddenList.includes(key);
                                return (
                                    <tr key={key}>
                                        <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>
)

免责声明 - 键应该是数据项的一部分以保持一致性，动态生成的迭代索引不保证键将被正确分配。

【讨论】：