onClick函数在运行时起作用，但在实际单击时不起作用

Question

我试图在单击按钮或菜单项时将用户重定向到另一个页面。不幸的是，onClick函数只在运行时起作用，在实际单击时不起作用，我不知道为什么。

这是我的功能

  const redirectCreateContact = (index) => {
  history.push({
    state: {category:index},
    pathname:"/apps/contacts/new/"

  });

  return <Redirect to={{
    pathname: '/apps/contacts/new/',
  }}/>;
}

function ContactsHeader(props)
{

    return (
        <div className="flex flex-1 items-center justify-between p-8 sm:p-24">

            <div className="flex flex-shrink items-center sm:w-224">
                <Hidden lgUp>
                    <IconButton
                        onClick={(ev) => {
                            props.pageLayout.current.toggleLeftSidebar()
                        }}
                        aria-label="open left sidebar"
                    >
                        <Icon>menu</Icon>
                    </IconButton>
                </Hidden>

                <div className="flex items-center">
                    <FuseAnimate animation="transition.expandIn" delay={300}>
                        <Icon className="text-32 mr-12">account_box</Icon>
                    </FuseAnimate>
                    <FuseAnimate animation="transition.slideLeftIn" delay={300}>
                        <Typography variant="h6" className="hidden sm:flex">Contacts</Typography>
                    </FuseAnimate>
                </div>
            </div>

            <div className="flex flex-1 items-center justify-center pr-8 sm:px-12">

                <ThemeProvider theme={props.mainTheme}>
                    <FuseAnimate animation="transition.slideLeftIn" delay={300}>
                        <Paper className="flex p-4 items-center w-full max-w-512 px-8 py-4" elevation={1}>

                            <Icon className="mr-8" color="action">search</Icon>

                            <Input
                                placeholder="Search for anything"
                                className="flex flex-1"
                                disableUnderline
                                fullWidth
                                inputProps={{
                               'aria-label': 'Search'
                                }}

                            />
                        </Paper>
                    </FuseAnimate>
                </ThemeProvider>
            </div>

          <div className="flex flex-2 items-center justify-center">
          <FormControl variant="filled" style={{width:"200px"}}>
            <InputLabel >Create New</InputLabel>
            <Select
              labelId="demo-simple-select-filled-label"
              id="demo-simple-select-filled"
            >
              <Button className='button-redirect' onClick={()=>redirectCreateContact(1)}>New Custom</Button>

              <MenuItem className='button-redirect' onClick={()=>redirectCreateContact(2)}>New Supplier</MenuItem>

            </Select>
          </FormControl>
          </div>
        </div>
    );
}

export default withRouter(ContactsHeader);

如果我调用函数时没有这样的回调

onClick ={redirectCreateContact(2)}

它在运行时调用，而不是在实际单击按钮或菜单项时调用。被调用的函数没有任何问题（我尝试过在单击时console.log一些东西，但没有结果）。

我错过了什么或做错了什么？

Answer 1

您应该替换为如下：

<Button className='button-redirect' onClick={()=>redirectCreateContact(1)}>New Custom</Button>

Answer 2

在MenuItem上调用redirectCreatecontact（2）方法与在Button onClick调用上调用不同，是否存在通过箭头函数调用该方法的原因？您是否尝试将代码更改为：

<MenuItem className='button-redirect' onClick={redirectCreateContact(2)}>New Supplier</MenuItem>

我只删除（）=

这是我能看到的唯一区别

Answer 3

问题就在这里onClick={redirectCreateContact（1）}

您正在执行渲染函数。

点击 = {() =