React + hooks

`import React, { useState, useEffect } from 'react'; // import { getList } from '@/services/common'; import { Input, Button, Table, Divider, Modal } from 'antd'; import styles from './index.less';

const Templates: React.FC = () => {

// 定义表单变量
const [dataSource, setDataSource] = useState<API.officialAccountTable>([]);


// 定义表头变量
const [columns, setColumns] = useState<API.officialAccountTableColumns>([]);


// 定义输入框变量
const [inputValue, setInputValue] = useState<string>('')

// 生命周期
useEffect(() => {
    // 一开始就改变值的话不能放在最外层，会导致无限循环，因为一直set会一直render，render后会重新加载又会set
    setColumns([
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_text: any, record: any) => (
                <span>
                    <a>查看详情</a>
                    <Divider type="vertical" />
                    <a onClick={() => setVisible(() => true)}>删除</a>
                </span>
            ),
        },
    ])

    setDataSource([
        {
            key: '1',
            name: '胡彦斌',
            age: '32',
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '3',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '4',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '5',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '6',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '7',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '8',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '9',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '10',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }, {
            key: '11',
            name: '胡彦祖',
            age: '42',
            address: '西湖区湖底公园1号',
        }
    ])

}, [])

// 点击搜索事件
const searchData = () => {
    console.log(inputValue)
}

const [visible, setVisible] = useState<boolean>(false)
console.log('visible', visible)
const handleOk = async () => {
    console.log('OK')
    await setVisible(() => false)
}

const handleCancel = async () => {
    console.log('cancel', visible)
    await setVisible(() => false)
}

return (<div>
    <div>
        <Modal
            title="删除确认"
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <p>确定删除该数据吗</p>
        </Modal>
    </div>

    <div>
        模板标题：
        <Input className={styles.searchMargin} size="middle" placeholder="请输入模板标题" onChange={(e) => setInputValue(e.target.value)} />
        <Button type="primary" size="middle" onClick={() => searchData}>
            搜索
        </Button>
    </div>
    <div>
        <Table dataSource={dataSource} columns={columns} style={{ marginTop: 20 }} />;
    </div>
</div>);

}; export default Templates; ` 绑定事件要用箭头函数，否则会自执行