React中onKeyUp事件无法向sendData函数传递数据求助

你的问题出在事件绑定方式错误，导致sendData函数没有拿到预期的输入框元素：

错误原因 #

你写的onKeyUp={sendData(this)}会在页面渲染时立即执行sendData函数，而非将其作为事件触发时的回调。此时的this并不是输入框元素（原生JS全局环境下this指向window，React等框架里指向组件实例），所以sendData接收的input参数不是预期的输入框，自然输出undefined。

修复方案 #

方案1：用箭头函数传递输入框元素 #

修改输入框的事件绑定，通过事件对象的target获取输入框：

<input type="text" id="userfield" onKeyUp={(e) => sendData(e.target)}/>

你的sendData函数可以保持不变，此时传入的就是输入框DOM元素，能正常访问value属性。

方案2：直接绑定函数，在内部获取事件对象 #

把sendData直接作为事件回调，函数内部通过事件参数获取输入框：

<input type="text" id="userfield" onKeyUp={sendData}/>

修改sendData函数：

function sendData(event){
  const input = event.target;
  if (input != null && input.value.trim()) { // 增加非空判断，避免无效请求
    console.log("data:", input.value);
    fetch('/userSearch',{
      method:'POST',
      headers:{'Content-Type': 'application/json'},
      body: JSON.stringify({ input: input.value})
    })
  }
}

进阶优化：添加防抖（模拟LinkedIn体验） #

如果直接每次按键都发请求，会产生大量无效请求。可以加防抖逻辑，用户停止输入300毫秒后再发送请求：

let debounceTimer;
function sendData(event){
  const input = event.target;
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    if (input != null && input.value.trim()) {
      console.log("data:", input.value);
      fetch('/userSearch',{
        method:'POST',
        headers:{'Content-Type': 'application/json'},
        body: JSON.stringify({ input: input.value})
      })
    }
  }, 300); // 可根据需求调整延迟时间
}

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