社区首页 >问答首页 >Reactstrap:从navItem获取属性值有时解析为null

问Reactstrap:从navItem获取属性值有时解析为null
EN

Stack Overflow用户

提问于 2022-10-16 01:41:49

回答 1查看 16关注 0票数 2

我有这样的组成部分：

class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {
      tab_to_display: null,
    };
    this.onTabSelected = this.onTabSelected.bind(this);
  }

  onTabSelected(e) {
    e.preventDefault();
    // tab_name is logged as null sometimes
    // And this happens randomly with different tabs
    const tab_name = e.target.getAttribute("value");
    console.log(
      " ~ file: ParentComponent.js ~ line 52 ~ ParentComponent ~ onTabSelected ~ tab_name",
      tab_name
    );
  }

  render() {
    const { tab_to_display } = this.state;

    const tab_items_info = [
      {
        tab_name: "tab_1",
        icon: "fa fa-users",
        component: <TabConentComponent1 />,
      },
      {
        tab_name: "tab_2",
        icon: "fa fa-users",
        component: <TabConentComponent2 />,
      },
      {
        tab_name: "tab_3",
        icon: "fa fa-users",
        component: <TabConentComponent3 />,
      },
      {
        tab_name: "tab_4",
        icon: "fa fa-users",
        component: <TabConentComponent4 />,
      },
      {
        tab_name: "tab_5",
        icon: "fa fa-users",
        component: <TabConentComponent5 />,
      },
    ];

    return (
      <Container className="container-fluid">
        <div className="nav-tabs-navigation">
          <div className="nav-tabs-wrapper">
            <Nav role="tablist" tabs>
              {/* 
                    Sometimes when I click on a tab
                    Its value attribute is detected as null
                    Inside onTabSelected */}
              {tab_items_info.map((nav_item) => {
                const { tab_name, icon } = nav_item;

                return (
                  <NavItem className="cursor-pointer">
                    <NavLink
                      value={tab_name}
                      onClick={this.onTabSelected}
                      className={tab_to_display == tab_name ? "active" : ""}
                    >
                      <i className={icon} />
                    </NavLink>
                  </NavItem>
                );
              })}
            </Nav>
          </div>
        </div>
        <TabContent activeTab={tab_to_display}>
          {tab_items_info.map((tab_item) => {
            const { tab_name, component } = tab_item;
            return (
              <TabPane tabId={tab_name} id={tab_name}>
                {component}
              </TabPane>
            );
          })}
        </TabContent>
      </Container>
    );
  }
}

当我单击一个选项卡时，它的值有时会在onTabSelected中正确解析。

  <NavLink
                      value={tab_name}
                      onClick={this.onTabSelected}
                      className={tab_to_display == tab_name ? "active" : ""}
                    >
                      <i className={icon} />
                    </NavLink>

有时，它被解析为null：

 ~ file: InstitutionPage.js ~ line 52 ~ InstitutionPage ~ onTabSelected ~ tab_name null

这是随机发生的。所以我不知道是什么引起的。

知道怎么回事吗？

dom-events

mern

reactstrap

javascript

reactjs

回答 1

Stack Overflow用户

发布于 2022-10-21 23:37:09

在对此进行调查之后，发现问题在于如何在NavLink中使用图标

  <NavLink
                    className="cursor-pointer test-border"
                    value="test"
                    onClick={this.onTabClicked}
                  >
                    <i className="fa fa-book" />
                  </NavLink>

使用文本解决了这个问题：

<NavLink
                className="cursor-pointer test-border"
                value="test"
                onClick={this.onTabClicked}
              >
                test
              </NavLink>