如何让 table 行在反应 table 时打开？

Question

我在描述部分放了一个显示和隐藏的按钮，因为描述的长度会很长。我想让这些按钮单独工作，同时让这些按钮保持打开状态，除非我再次单击它们。

问题是如果我点击第一个然后点击第二个，那么它不会打开第二个而是关闭第一个。

这是我的代码，我知道我应该在 isoPen、currentReport 和 key 上工作。我只是不知道如何解决。

const [isOpen, setIsOpen] = useState(false);
const [currentReport, setCurrentReport] = useState(0);

<Table style={{ marginTop: "30px" }}>
    <thead>
        <tr>
            <th class="name">name</th>
            <th class="description">description</th>
            <th class="date">date</th>
        </tr>
    </thead>
    <tbody>
        {data&&
            data.map((value,key)=>
            (
                <tr key={key}>
                    <td class="name">{value.name}</td>
                    <td >
                        <Button color="primary" onClick={() => {
                            setIsOpen(!isOpen);
                            setCurrentReport(key);
                            console.log(currentReport);
                        }}>Show/Hide</Button>
                            <Collapse isOpen={isOpen&&(currentReport===key)}>
                                <Card>
                                    ...
                                </Card>
                                <div style={{marginTop:'5px', marginLeft:'2px', textAlign:'right'}}>
                                    <Button color='info' onClick={()=>{
                                        setEditOn(!editOn);
                                        setCurrentReport(key);
                                    }}>Update</Button>
                                        <Modal isOpen={editOn&&(currentReport===key)} toggle={toggle}>
                                            ...
                                        </Modal>
                                    <Button color='danger' onClick={()=>{
                                        ...
                                    }}>Delete</Button>
                                </div>
                            </Collapse>
                    </td>
                    <td class="date" style={{ fontSize:'smaller' }}>{value.year}/ <br/>{value.month}/ {value.date}</td>
                </tr>
            ))}
    </tbody>
</Table>

此外，由于我将 0 放在 const [currentReport, setCurrentReport] 的 useState() 中，虽然我第一次单击第二个或第三个，但 console.log(currentReport) 显示 0第一次。明显地... 我应该在 const [currentReport, setCurrentReport] 的 useState() 中输入什么值？

Answer 1

Here's my code and I know I should work on isoPen, currentReport and key. I just have no idea how to work it out.

您的直觉是正确的。您必须将 isOpen 标志更改为标志列表，其中此列表中的索引将对应于映射到组件的 data 中的索引。只是不要忘记初始化它。 currentReport 与显示和隐藏机制无关。每次使用 isOpen 时，您现在应该使用 isOpen[key] 代替：

<Collapse isOpen={isOpen&&(currentReport===key)}>

进入

<Collapse isOpen={isOpen[key] && (currentReport===key)}>

您还需要更改按钮的行为：它需要复制 isOpen 数组，更改索引下的值，然后将状态设置为新值（您不能只更改中的值数组因为反应不会将这个修改后的数组视为新值 - 引用必须更改）

<Button color="primary" onClick={() => {
    let newIsOpen = [...isOpen];      //copy array
    newIsOpen[key] = !newIsOpen[key]; //toggle flag
    setIsOpen(newIsOpen);             //set new state
    setCurrentReport(key);
    console.log(currentReport);
 }}>Show/Hide</Button>

我不确定 currentReport 是干什么用的，但我想它指出了哪个报告将以某种方式被修改（如果是这种情况，我建议为它添加另一个按钮），所以对于第一次（在用户指出任何报告之前）你应该简单地把 null 甚至 undefined 值放在那里。

const [currentReport, setCurrentReport] = useState(undefined);

如何让 table 行在反应 table 时打开？

how to leave table rows opened on react table?

show-hide

reactjs

reactstrap

react-table

use-state