React中如何给按钮组件传递不同函数并绑定onClick事件

我在App组件中编写了showActive、showAll等列表筛选函数，页面各部分已拆分为独立组件，希望通过TaskControl组件将这些函数传递给Button组件，并绑定到对应按钮的onClick事件，但目前无法为每个按钮分配对应函数——当前Button组件的onClick会同时调用两个函数，部分按钮因未传全函数还会报错。

现有代码 #

App组件

App (){
  const showActive = () => {
    const temp = todos.filter(todo => todo.isComplete == false)
    setNewCopy([...temp])
    console.log(temp)
  }

  const showAll = () => { 
    setNewCopy([...todos])
  }
  return (
    <div className='page' >
      <div className="container">
        <Tasks tasks={todosCopy} onDelete={onDelete} onComplete={onComplete}/>
        <TaskControl tasks={todos} showActive={showActive} showAll={ showAll} />
        
        <p className='hint'>Drag and drop to reorder list</p>
      </div>
    </div>
  )
}

TaskControl组件

const TaskControl = ({ tasks, showActive, showAll}) => {
  return (
    <div>
      <div className="task-filter">
        <Button color='task-control-filter'  text='All' showAll={ showAll}/>
        <Button color='task-control-filter' showActive={ showActive} text='Active' />
        <Button color = 'task-control-filter' text='Completed' />
      </div>
      <Button color = 'task-control-clear' text= 'Clear Completed'/>
    </div>
  )
}

Button组件

const Button = ({ text, color, showActive, showAll }) => {
  return (
    <button className={`btn ${color}`} onClick={() => {
        showActive()
        showAll()
    }}> 
      {text}
    </button>
  )
}

解决方案 #

方法1：传递统一onClick回调（推荐）

让Button组件做通用按钮，不关心具体点击逻辑，将每个按钮对应的函数直接通过onClickprops传递，职责更清晰：

修改TaskControl组件：

const TaskControl = ({ tasks, showActive, showAll, showCompleted, clearCompleted}) => {
  return (
    <div>
      <div className="task-filter">
        <Button color='task-control-filter' text='All' onClick={showAll}/>
        <Button color='task-control-filter' text='Active' onClick={showActive}/>
        <Button color='task-control-filter' text='Completed' onClick={showCompleted}/>
      </div>
      <Button color='task-control-clear' text='Clear Completed' onClick={clearCompleted}/>
    </div>
  )
}

修改Button组件：

const Button = ({ text, color, onClick }) => {
  return (
    <button className={`btn ${color}`} onClick={onClick}> 
      {text}
    </button>
  )
}

方法2：通过按钮文本/ID判断调用函数（不推荐，灵活性差）

如果想保留传递单个函数的方式，可以在Button组件内通过文本或ID判断执行对应逻辑：

修改Button组件（按文本判断）：

const Button = ({ text, color, showActive, showAll, showCompleted, clearCompleted }) => {
  const handleClick = () => {
    switch(text) {
      case 'All':
        showAll?.();
        break;
      case 'Active':
        showActive?.();
        break;
      case 'Completed':
        showCompleted?.();
        break;
      case 'Clear Completed':
        clearCompleted?.();
        break;
      default:
        break;
    }
  }

  return (
    <button className={`btn ${color}`} onClick={handleClick}> 
      {text}
    </button>
  )
}

你提到的给按钮加ID的思路，本质和按文本判断类似，只需把判断条件换成id即可，但同样不如传递onClick回调简洁。

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