ReactJS按键后循环触发事件与子组件onClick失效问题求助

问题1：子组件按钮onClick无响应 #

• 原因：绑定事件时直接执行函数（如onClick={handleEdit(task.id)}），这种写法会在组件渲染时立即调用函数，而非把函数作为回调传递给onClick，导致点击按钮时没有绑定任何事件逻辑，元素检查也看不到onClick属性。
• 修复：传递回调函数而非直接执行函数，用箭头函数包裹调用逻辑：

  // 错误写法
  <button onClick={handleEdit(task.id)}>编辑</button>
  
  // 正确写法
  <button onClick={() => handleEdit(task.id)}>编辑</button>
  

问题2：handleEdit函数在输入框按键时触发 #

• 原因：和问题1本质相同——错误地在渲染时直接执行了handleEdit函数，每当输入框修改newTask状态导致组件重新渲染时，handleEdit就会被调用一次。
• 修复：同样通过箭头函数包裹，确保只有点击按钮时才执行handleEdit：
  父组件给子组件传递props时，也要保证是传递函数而非立即执行：

  // 错误写法（父组件传递props时）
  <Task onEdit={handleEdit(task.id)} />
  
  // 正确写法
  <Task onEdit={() => handleEdit(task.id)} />
  

修改后的完整代码示例 #

父组件 App.js

import { useState } from 'react';
import Task from './Task';

function App() {
  const [tasks, setTasks] = useState([{ id: 1, name: '完成React学习' }]);
  const [newTask, setNewTask] = useState('');

  const handleEdit = (taskId) => {
    // 编辑逻辑示例：找到对应任务并更新内容
    const updatedTasks = tasks.map(task => 
      task.id === taskId ? { ...task, name: newTask } : task
    );
    setTasks(updatedTasks);
  };

  const handleInputChange = (e) => {
    setNewTask(e.target.value);
  };

  return (
    <div className="App">
      <input 
        type="text" 
        value={newTask} 
        onChange={handleInputChange} 
        placeholder="输入任务内容"
      />
      {tasks.map(task => (
        <Task 
          key={task.id} 
          task={task} 
          onEdit={() => handleEdit(task.id)} // 用箭头函数包裹回调
        />
      ))}
    </div>
  );
}

export default App;

子组件 Task.jsx

function Task({ task, onEdit }) {
  return (
    <div className="task-item">
      <span>{task.name}</span>
      <button onClick={onEdit}>编辑</button> {/* 直接传递回调函数 */}
    </div>
  );
}

export default Task;

内容的提问来源于stack exchange，提问作者Bambi Bunny