React中按下回车键触发handleSendMessage是否需要传event参数

结论 #

不需要特意传递event参数，除非你需要在handleSendMessage内部使用事件对象的相关能力。

具体分析 #

你当前的handleSendMessage定义和现有调用链路都没有用到事件对象的属性/方法，所以绑定回车事件时不需要把event透传到该函数中。
现有调用链路为：

• 回车事件触发回调
• 调用WaitingRoom传入的handleMessage方法
• 最终调用handleSendMessage

两种场景的处理方式 #

不需要传event的场景 #

如果你已经提前把需要用到的输入内容、socketId等数据存在状态里，直接在回车回调里拿对应参数调用handleMessage即可：

// 示例：WaitinRoomCardListItem组件内的回车绑定逻辑
const [inputContent, setInputContent] = useState('')

const handleEnterPress = (e) => {
  if (e.key === 'Enter') {
    // 直接传入已有的参数即可，不用透传event
    props.handleMessage(currentSocketId, inputContent)
  }
}

需要传event的场景 #

如果你需要在handleSendMessage里做阻止默认提交、获取触发事件的DOM属性等操作，就需要沿着调用链路补充参数透传：

1. 先调整handleSendMessage的入参，新增event接收位：

function handleSendMessage(socketId, mesg, clientMessage, event) {
  event?.preventDefault() // 示例用法：阻止表单默认提交行为
  console.log("calling this metho", socketId, mesg);   
}

2. 调整WaitingRoom内的handleMessage，透传event：

function handleMessage (socketId, msg, event) {
  console.log('chat open clicked', socketId, msg)
  handleSendMessage(socketId, msg, null, event)
}

3. 回车回调调用时传入event：

const handleEnterPress = (e) => {
  if (e.key === 'Enter') {
    props.handleMessage(currentSocketId, e.target.value, e)
  }
}

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