reactjs 使用挂钩切换特定行

polhcujo  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(152)

toggleHidden(键)中出错[错误:应为0个参数,但得到1]请建议更正顶部切换,并为特定行使用键
code

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

()=〉设置为打开;
const[是隐藏的,设置是隐藏的] =React使用状态(真)
()=〉设置为隐藏(!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>

)}

daolsyd0

daolsyd01#

只需将状态更改为一个数组,并在切换时将键“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>
)

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

相关问题