如何只显示单击的任务

Question

当我按下“显示子任务”时，我只希望显示按下的任务和子任务。当我按下“隐藏”按钮时，我希望它回到原来的样子。我怎么能这么做。清单的视图

return (
    <ListGroup>
        {todos.map((task, index) => (
            <ListGroup key={index} >
                <ListGroupItem style={{ textDecoration: completeTask(task) ? 'line-through' : 'none'}} >
                    {index + 1}....{task.name}....( {task.subdata.length} subtasks )
                    <Button size='sm' className='mx-2' variant='outline-dark' onClick={() => { openClick(task.name) }}>
                        Show Subtasks
                    </Button>
                    <Button size='sm' variant='outline-secondary' onClick={closeClick}>
                        Hide Subtasks
                    </Button>
                </ListGroupItem>
                {task.subdata.filter(child => child.complete === false).map((child, index) => (
                    <ListGroupItem style={{ textDecoration: child.complete ? 'line-through' : '', display: open === task.name ? 'block' : 'none' }} key={index} className='mx-1'>
                        {child.name}
                        <Button size='sm' className='mx-5' variant='outline-dark' onClick={() => { handleToggle(child.id, taskName) }}>
                            {<BsCheckLg  />}
                        </Button>
                    </ListGroupItem>
                ))}
                <ListGroupItem style={{ fontWeight: 'bold', display: open === task.name ? 'block' : 'none' }} className='mx-2'>
                    Completed Subtasks
                </ListGroupItem>

                {task.subdata.filter(child => child.complete === true).map((child, index) => (
                    <ListGroupItem style={{ textDecoration: child.complete ? 'line-through' : '', display: open === task.name ? 'block' : 'none' }} key={index} className='mx-2'>
                        {child.name}
                        <Button size='sm' className='mx-5' variant='outline-dark' onClick={() => { unHandleToggle(child.id, taskName) }}>
                        {<BsXLg  />}
                        </Button>
                    </ListGroupItem>
                ))}
            </ListGroup>
        ))}
    </ListGroup>
)

}

Answer 1

很难准确地理解您想要实现的目标，但我想您可以使用useState，这样每当您显示或隐藏它时，您都可以以您想要的方式设置它的状态：

import { useState } from 'react'
.......

const [visibility, setVisibility] = useState(false)

const openClick = (taskName) => {
  .......
  setVisibility(true)
}

const closeClick = () => {
  .......
  setVisibility(false)
}