javascript React JS onKeyUp事件未向函数发送数据

pod7payv 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(147)

我正试图创建一个像linkedin那样的ajax user search，所以当我从键盘上输入一个字符时，我应该不用按回车键就能得到结果。
在我的输入字段中，我使用**onKeyUp = {sendData（this）}**在sendData函数中发送数据，然后获取结果。

<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事件没有向函数发送任何东西。我错过了什么吗？

JavaScript

来源：https://stackoverflow.com/questions/75156290/react-js-onkeyup-event-does-not-sending-data-to-function

2条答案

按热度按时间

3okqufwl1#

在React onKeyUp和事件监听器中，通常期望传递一个函数，并且默认情况下会将event作为参数传递。在您的情况下，您希望传递sendData函数，如下所示：

<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函数，然后await的结果如下：

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

赞(0）回复(0）举报 2023-01-19

ws51t4hk2#

您可以使用

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

e.target为您提供触发事件的元素。
e.target.value检索该元素的值

赞(0）回复(0）举报 2023-01-19

我来回答

javascript React JS onKeyUp事件未向函数发送数据

2条答案

相关问题

热门标签

最新问答