onClick 函数在 Material-ui table 中触发了多次而不是一次

Question

第一个问题，非常明显，是当我点击 table 中的一个对象时，在每个对象下调用 onClick 函数，而我希望“教程完整信息”仅显示在单击的对象。 下面是 table 的样子： enter image description here 所以当我点击一个对象时，在本例中是第一个： enter image description here 另一个问题是 table 中的列会根据我单击的对象发生变化。 例如，如果我点击第二个，它就会变成这样： enter image description here

代码：

......

  <Table className="align-items-center table-flush" responsive>
                  <TableHead className="thead-light">
                    <TableRow>

                      <th scope="col">Project</th>
                      <th scope="col">Budget</th>
                      <th scope="col">Interest</th>
                      <th scope="col">Country</th>
                      <th scope="col">Score</th>
                      <th scope="col">Completion</th>
                      <th scope="col" />
                    </TableRow>
                  </TableHead>
                  <TableBody>


                    {tutorials &&
                      tutorials.map((tutorial, index) => (
                        <>
                          <TableRow
                            className={
                              "list-group-item " + (index === currentIndex ? "active" : "")
                            }
                            onClick={() => setActiveTutorial(tutorial, index)}
                            key={index}
                          >
                            <TableCell>{tutorial.title}</TableCell>
                            <TableCell>{tutorial.size}</TableCell>
                            <TableCell>{tutorial.country}</TableCell>
                            <TableCell className="text-right">
                              <UncontrolledDropdown>
                                <DropdownToggle
                                  className="btn-icon-only text-light"
                                  href="#pablo"
                                  role="button"
                                  size="sm"
                                  color=""
                                  onClick={e => e.preventDefault()}
                                >
                                  <i className="fas fa-ellipsis-v" />
                                </DropdownToggle>
                                <DropdownMenu className="dropdown-menu-arrow" right>
                                  <DropdownItem
                                    href="#pablo"
                                    onClick={e => e.preventDefault()}
                                  >
                                    Update
                                  </DropdownItem>
                                  <DropdownItem
                                    href="#pablo"
                                    onClick={e => e.preventDefault()}
                                  >
                                    ...
                                  </DropdownItem>
                                  <DropdownItem
                                    href="#pablo"
                                    onClick={e => e.preventDefault()}
                                  >
                                    Delete
                                  </DropdownItem>
                                </DropdownMenu>
                              </UncontrolledDropdown>
                            </TableCell>
                          </TableRow>

                          <Grid
                            container
                            direction="column"
                            justify="center"
                            alignItems="stretch"
                          >
                            <ul className="col-md-6">
                              {currentTutorial ? (
                                <div>
                                  <h4>Tutorial Full Info</h4>
                                  <div>
                                    <label>
                                      <strong>Title:</strong>
                                    </label>{" "}
                                    {currentTutorial.title}
                                  </div>
                                  <div>
                                    <label>
                                      <strong>Country:</strong>
                                    </label>{" "}
                                    {currentTutorial.country}
                                  </div>
                                  <div>
                                    <label>
                                      <strong>Business:</strong>
                                    </label>{" "}
                                    {currentTutorial.business}
                                  </div>
                                  <div>
                                    <label>
                                      <strong>Size:</strong>
                                    </label>{" "}
                                    {currentTutorial.size}
                                  </div>
                                  <div>
                                    <label>
                                      <strong>Wishlist:</strong>
                                    </label>{" "}
                                    {currentTutorial.wishlist}
                                  </div>
                                  <div>
                                    <label>
                                      <strong>Details:</strong>
                                    </label>{" "}
                                    {currentTutorial.detail}
                                  </div>

                                </div>
                              ) :  (
                                <span></span>
                              )}
                            </ul>

                          </Grid>
                        </>
                          ))}

                        </TableBody>
                      </Table>
......

感谢任何能帮助我的人。

Answer 1

将 currentTutorial ? 更改为 (currentTutorial && currentIndex===index) ? 应该可以解决只显示当前活动项目的教程的问题。列的宽度会发生变化，因为如果您在 Table 中插入一个元素，默认情况下它只会跨越 1 列，因此它会扩展第一列所需的宽度，您只需将 FullTutorial 包装在一个table 这样排。

{(currentTutorial && currentIndex===index) 
  && <TableRow>
     <TableCell colSpan = {6}> //colSpan = {6} tell the cell to span 6 columns
        <Grid
          container
          direction="column"
          justify="center"
          alignItems="stretch"
        >
          <ul className="col-md-6">

            <div>
               <h4>Tutorial Full Info</h4>
               <div>
                  <label>
                     <strong>Title:</strong>
                  </label>{" "}
                  {currentTutorial.title}
               </div>
               //......
            </div>
          </ul>
        </Grid>
    </TableCell>
</TableRow>}