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

Question

我有一个组件 MainContent，它显示一个 table，其中包含一些项目列表。它还呈现带有选项卡的折叠部分。 table 有一个列显示一些操作（编辑、查看等），这些操作由 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", "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;

这是 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;

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

Answer 1

你按照这里的步骤

第 1 步：

添加另一个函数 'handleItemClick'，其中包含选项卡的一个参数 id/index。喜欢

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

第 2 步：

在你的图标元素中附加点击事件 index/id like

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

或关注此 link codesandbox.io

希望能解决您的问题。

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

How to switch between the tabs with an on-Click from a button as well as by clicking the tab menu?

javascript

reactjs

semantic-ui

semantic-ui-react

你按照这里的步骤

第 1 步：

第 2 步：

谢谢