React中切换按钮的onClick方法

Question

我正在作为一个初学者从事React项目，因为这个问题可能有点愚蠢。我阅读了有关此情况的所有线程，但是由于我不得不打开此线程，它们都无法解决我的问题。

所以，我的问题是切换按钮的onClick方法。我的网站左侧面板上有一个切换按钮，它已经准备就绪，但是我无法编写onClick方法；

这是其中的简单代码部分：

const prepareNavigationItems = authorizations => {
  const result = [];
  navigationData.forEach(item => {
    if (!item.scope) return result.push(item);

    if (item.scope.every(s => authorizations.includes(s))) {
      // Iterate in sub nav items too.
      if (item.navs && item.navs.length > 0) {
    item.navs.forEach(navItem => {
      if (
        navItem.scope &&
        !navItem.scope.every(i => authorizations.includes(i))
      ) {
        item.navs.splice(item.navs.indexOf(navItem), 1);
      }
    });
  }

  result.push(item);
 }
});

 return result;

};

const Navigation = ({ authorizations, closeNavigation, isNavVisible })    => {
const navItems = prepareNavigationItems(authorizations);
const [collapse, setCollapse] = useState();

return (
<ScSidenav isShown={isNavVisible}>
  <ScSidenavClose >
    <Icon name='back' onClick{}/>
  </ScSidenavClose>
  <Box mb={1} display="flex" alignItems="center">
    <ScSidenavLink to="/">
      <img src={svgLogoLight} alt="AlienBroker App" height="60"/>
    </ScSidenavLink>
  </Box>

  {navItems.map((item, index) => (
    <Box mt={item.push ? 'auto' : 0} key={`main-nav-item-${index}`}>
      {!item.isDivider && (
        <ScNavLink
          exact={item.exact ? true : false}
          to={item.url}
          activeClassName="active"
          isActive={(match, location) => {
            if (item.exact) {
              return location.pathname === item.url;
            }

            return location.pathname.startsWith(item.url);
          }}
        >
          {item.icon}
          <span>{item.text}</span>
        </ScNavLink>
      )}

      {item.isDivider && <ScNavLinkDivider>{item.text}</ScNavLinkDivider>}
    </Box>
  ))}
  <Box mb={3}></Box>
</ScSidenav>
 );
};

const mapStateToProps = ({ session, ui }) => {
return {
  authorizations: session.authorizations,
  isNavVisible: ui.isNavVisible,
 };
};

const mapDispatchToProps = dispatch =>
  bindActionCreators({ closeNavigation }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

我希望有人可以帮助我。

祝您愉快！

Answer 1

onClick方法必须这样写：

<ScSidenavClose >
        <Icon name='back' onClick='yourfunction()'/>
</ScSidenavClose>

您还需要在<script>标签中准备功能：

<script language='javascript'>
function button_action() {
      alert('Button clicked !')
}
</script language='javascript'>

自从我上次使用JavaScript以来已经有一段时间了，所以希望我不会犯任何错误或误解了您的问题。