为什么在按钮中传递一个js语句到onclick会立即激活？

Question

EntryPageContent.js:

import Grid from '@material-ui/core/Grid';
import { Box, Button } from '@material-ui/core';
import { BrowserRouter as Router, Switch, Route, useHistory } from 'react-router-dom';

function EntryPageContent (){
    let history = useHistory();

    const changeURL =() =>{
        history.push('/login');
    }

    return (
        <Box className='h-screen w-screen bg-blue-200 overflow-x-hidden overflow-y-scroll'>
            <Box className='h-1/4 flex items-center justify-center'>READY YET APPLICATION ENTRY POINT</Box>
            <Box className=' h-3/4 w-full flex items-center justify-center'>
                <Grid container spacing={1} align='center'>
                    <Grid item xs={12} className='space-x-10 md:space-x-60'>
                        <Button variant="contained" color="primary" onClick={changeURL}>
                            Pharmacist
                        </Button>
                        <Button variant="contained" color="primary">
                            Pick Up
                        </Button>
                    </Grid>
                </Grid>
            </Box>
        </Box>
      );
}
 
export default EntryPageContent;

这是正确的版本，我将函数 changeURL 传递给按钮的 onClick 属性，但我想知道的是为什么它总是转到http://localhost:3000/login 如果我直接将 history.push('/login') 传递给 onClick 而不是函数 changeURL?

Answer 1

因为当您使用 onclick={expr} 时，expr 会被评估以了解要传递给 onclick 的值。因此，如果您执行 onclick={history.push('/login')}，您将直接评估 history.push('/login').

相反，您可以使用箭头函数，例如 onclick={() => history.push('/login')}。

为什么在按钮中传递一个js语句到onclick会立即激活？

Why does passing a js statement to onclick in a button will be active immediately?

javascript

buttonclick

reactjs

react-hooks