React JS onKeyUp 事件不发送数据到 function

Question

我正在尝试像 linkedin 一样创建ajax user search ，所以当我从键盘输入一个字符时，我应该在不按回车键的情况下得到结果。

在我的输入字段中，我有onKeyUp={sendData(this)}来发送 sendData function 中的数据，然后获取结果。

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

 function sendData (input){
    if (input!=null){
    console.log("data:",input)
    fetch('/userSearch',{
      method:'POST',
      headers:{'Content-Type': 'application/json'},
      body: JSON.stringify({ input: input.value})
    
    })
    }
  }

我的问题是在console.log("data:",input)行中我得到了未定义。 这意味着 onKeyUp 事件不会向 function 发送任何内容。我错过了什么吗？

Answer 1

在 React onKeyUp和事件侦听器中，通常期望传递 function，并且默认情况下会将event作为参数传递。 在您的情况下，您希望像这样传递sendData function：

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

然后接收输入元素，如：

function sendData (event){
   const input = event.target;
   // Do stuff with input
  }

此外，如果您尝试获取一些数据，则必须以某种方式处理它。 您应该将.then((result)=>{/* Handle the result */})添加到fetch调用或使sendData成为async function 然后await结果，例如：

async function sendData (event){
   const input = event.target;
   const result = await fetch(/*...*/)
  }

Answer 2

简单地你可以使用

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

e.target为您提供触发事件的元素。

e.target.value检索该元素的值