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

问题描述

我有一个组件MainContent，该组件显示了具有某些项目列表的表格。它还使用Tabs渲染折叠部分。表格的一列显示了一些操作（编辑，视图等），这些操作由Icon（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",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;

这是TabContent

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被设置为一个值，因此另一个选项卡被禁用。非常感谢您的帮助。

解决方法

您按照此处的步骤

步骤1：

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

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

步骤2：

在带有项目索引/ ID的图标元素中添加点击事件

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

或点击此链接https://regex101.com/r/QvDjzh/1/

希望能解决您的问题。

谢谢