react 点击事件注意事项

一只小阿乐2025-11-18 9:13

复制代码

// ✅ 没有参数时可以这样写
<Button onClick={handleSubmit}>提交</Button>

// ❌ 有参数时不能这样写
<Button onClick={handleBookAction}>操作</Button> // 缺少参数

使用react 在给标签绑定点击事件的时候有参数一般需要使用箭头函数的形式当然有其他的方式去写这个

最常用的是箭头函数

来个实例

复制代码

import React from 'react'
import { Button, message } from 'antd'

const BookList = () => {
  const books = [
    { id: 1, name: '书本1' },
    { id: 2, name: '书本2' },
    { id: 3, name: '书本3' }
  ]

  const handleBookAction = (item, action) => {
    console.log('操作:', item.name, action)
    message.info(`对《${item.name}》执行${action}操作`)
    
    // 根据不同的 action 执行不同的逻辑
    switch(action) {
      case 'edit':
        // 打开编辑弹窗
        break
      case 'chapters':
        // 打开章节管理
        break  
      case 'publish':
        // 执行发布逻辑
        break
      default:
        break
    }
  }

  return (
    <div>
      {books.map(item => (
        <div key={item.id} style={{ marginBottom: 16 }}>
          <span>{item.name}</span>
          <Button type="link" onClick={() => handleBookAction(item, 'edit')}>编辑</Button>
          <Button type="link" onClick={() => handleBookAction(item, 'chapters')}>章节管理</Button>
          <Button type="link" onClick={() => handleBookAction(item, 'publish')}>发布</Button>
        </div>
      ))}
    </div>
  )
}

export default BookList