Question

我有一些数据可以映射成表格。当单击特定的td时，我想切换该td的ID名称，从而更改该元素的样式。我想使用useState挂钩来做到这一点。这是我的第一篇文章，所以请多包涵。

const Page = props => {
    const [expanded, setExpanded] = useState([]);

    const toggleExpanded = (ID) => {
       let array = expanded;

        if (array.includes(ID)) {
            array.splice(array.indexOf(ID));
            setExpanded(array);
        } else {
            array.push(ID);
            setExpanded(array);
        }
    }

<tbody>
        {props.results.test.map((eachTest, index) => {                            
             return (
                <tr key={index}>
                    <td>
                        {eachTest.item}
                    </td>
                    <td id={expanded.includes(eachTest.value)? null : "anIdName"} onClick={() => toggleExpanded(eachTest.id)}>
                         {someData}
                    </td>
               </tr>
                     )
          }
</tbody>

Answer 1

我不知道这是否是您要寻找的答案，但我的情况与此类似。您想要做的是将数组保存为所有子级的父级。但是对于孩子（又名表行或数据），其他孩子在做什么并不重要。因此，您不必跟踪整个阵列。而是只关注单击时将其设置为true或false。

我的实现是这样的：

const [expanded, setExpanded] = useState(false);

onClick事件为() => setExpanded(!expanded) 在<td>或<tr>上，您只需执行<tr className={expanded ? 'class-true' : 'class-false'}>

如何使用react useState挂钩切换特定表行的ID？

1 个答案: