如何通过单击按钮以及单击选项卡菜单在选项卡之间切换？

Question

我有一个组件MainContent，它显示了一个包含一些项目列表的表格。它还呈现带有选项卡的折叠部分。该表有一列显示了由图标（Semantic-UI React）显示的一些操作（编辑、查看等）。我想通过单击这些图标以及单击选项卡菜单在这些选项卡之间切换。 所以目前我只能用 onClick 这些图标来切换。

当前实现：

const MainContent = () => {
  const [activeIndex, setactiveIndex] = useState(0);
  const handleClickView = (expand, tab) => {
    setActiveKey(expand);
    // switching between parent and usecase
    if (tab == "USECASE") {
      setactiveIndex(0);
    } else {
      setactiveIndex(1);
    }
   ....
   ....
  };
  
  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        .... 
        ....
        ....
        <td>
          <Icon
            link
            name="eye"
            onClick={(event) => handleClickView("0", "PARENT", event)}
          />
          <Icon
            link
            name="edit"
            onClick={(event) => handleClickView("0", "PARENT", event)}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };

  // Iterating through child-mock...
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          ....
          ....
          ....
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon link name="delete" />
          </td>
        </tr>
      ....
      ....
      </>
    ) : (
      ....
      ....
      ....
    );
  };

  return (
    <div>
        <AddMock
        activeIndex={activeIndex}
      />
      <div className="container-fluid">
        ....
        ....
        ....
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            ....
                            ....
                            ....
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   .....
                   ....
                   ...
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

这是 AddMock.js

const AddMock = forwardRef((props, ref) => {
 ....
 ....
  return (
    <div className="row" ref={ref}>
      <Accordion>
        .....
        .....
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container>
                <TabContent activeIndex={props.activeIndex} />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
});

export default AddMock;

这是标签内容

const panes = [
  {
    menuItem: "Parent",
    ....
  },
  {
    menuItem: "Usecase",
    ....
    },
  },
];
const TabContent = (props) => (
  <Tab
    menu={{ secondary: true, pointing: true }}
    panes={panes}
    renderActiveOnly={true}
    activeIndex={props.activeIndex}
  />
);

export default TabContent;

因此，目前使用此解决方法，我只能通过单击表格中的图标来切换到选项卡。我也想通过单击切换到另一个选项卡。由于 activeIndex 设置了一个值，因此禁用了另一个选项卡。非常感谢任何帮助。

Answer 1

您按照此处的步骤操作

第 1 步：

添加另一个函数“handleItemClick”，其中包含选项卡的一个参数 ID/索引。喜欢

handleItemClick = (id) => this.setState({ activeIndex: id });

第 2 步：

在您的图标元素中附加单击事件，并带有项目索引/ID，例如

<Icon
  link
  name="eye"
  onClick={() => this.handleItemClick(1)}
/>

或点击此链接codesandbox.io

希望能解决您的问题。

谢谢