学习记录486@react onClick事件自动被调用的问题

代码

这个代码主要引入antd中的表格组件，然后我点击编辑，就拿到这一行的数据，然后就可以进行编辑这个这一行的数据了。

import React, { useState } from "react";
import { Button, Modal } from "antd";
import { Table, Tag, Space } from 'antd';
import { Card } from 'antd';
import { Input } from 'antd';

export default () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <>
          {tags.map(tag => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Button type="primary" className="mr-3" onClick={edit(record)}>查询</Button>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  const [name, setName] = React.useState();
  const [age, setAge] = React.useState();
  const [nameAdd, setNameAdd] = React.useState(1);
  const [ageAdd, setAgeAdd] = React.useState(2);
  const findList=()=>{
    console.log("@", name, age);
  }
  const [isAddVisible, setIsAddVisible] = React.useState(false);
  const add=()=>{
    console.log("添加分类");
    setIsAddVisible(true);
  }
  const handleOk=()=>{
    console.log("handleOk", nameAdd, ageAdd);
    setIsAddVisible(false);
  }
  const handleCancel=()=>{
    console.log("handleCancel", nameAdd, ageAdd);
    setIsAddVisible(false);
  }
  const edit=(record)=>{
    console.log("edit", record);
  }
  return (
    <div className="mt-2 mr-2 ml-2">
      <Card
        title= {
          <span>
            姓名：<Input placeholder="输入姓名" value={name} onChange={(e) => setName(e.target.value)} style={{ width: 100 }} className=" mr-3" />
            年龄：<Input placeholder="输入年龄"  value={age} onChange={(e) => setAge(e.target.value)} style={{ width: 100 }} className="mr-3" />
            <Button type="primary" className="mr-3" onClick={ findList }>查询</Button>
          </span>
        }
        extra={<Button onClick={add} type="primary" className="mr-2">添加分类</Button>} >
        <Table columns={columns} dataSource={data} />
        <Modal title="添加分类" visible={isAddVisible} onOk={handleOk} onCancel={handleCancel}>
          <Space direction="vertical">
            <Input addonBefore="姓名" placeholder="输入姓名" value={nameAdd} onChange={(e) => setNameAdd(e.target.value)} className=" mr-3" />
            <Input addonBefore="年龄" placeholder="输入年龄"  value={ageAdd} onChange={(e) => setAgeAdd(e.target.value)} className="mr-3" />
          </Space>
        </Modal>
      </Card>
    </div>
  );
};

关注以上edit函数和被调用的地方，49行和97行，当我展示页面的时候，会发现自动被动用了，多次输出了record，这是什么原因呢？
onClick应该接收的是一个函数，而如果直接传递edit(record)则相当于调用了这个函数，当然就自动执行了，因该是这样传递：

{
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Button type="primary" className="mr-3" onClick={()=>edit(record)}>查询</Button>
      ),

这样的话就是把一个函数传递给onClick，当点击的时候，就会调用这个函数了。
关于这个问题其实非常重要，推荐观看以下视频，可以把onClick这种事件到底应该怎么用说的很清楚，如果看完这些视频就可以把这个事情搞清楚了：

https://www.bilibili.com/video/BV1wy4y1D7JT?p=14
https://www.bilibili.com/video/BV1wy4y1D7JT?p=15
https://www.bilibili.com/video/BV1wy4y1D7JT?p=16
https://www.bilibili.com/video/BV1wy4y1D7JT?p=17
https://www.bilibili.com/video/BV1wy4y1D7JT?p=18
https://www.bilibili.com/video/BV1wy4y1D7JT?p=35
https://www.bilibili.com/video/BV1wy4y1D7JT?p=36