Javascript 在ReactJS中处理onKeyPress事件

我有一个输入，需要按“回车”从服务器获取数据

有一个小问题。当我开始在输入中写字母时，它只显示一个字母，不允许我再写另一个字母。比如，如果我按“a”，它会显示“a”，然后如果我按“b”，它会改变并显示“b”。我需要写一个城市的名字，但它只显示一个字母。可能是愚蠢的问题，我遗漏了一些东西，但需要帮助

代码：

const-App=（）=>{
const[location，setLocation]=useState（“”）
const dispatch=usedpatch（）
常量handleSetLocation=（{target:{value}}）=>{
设置位置（值）
}
常量getWeatherInfo=（{key}）=>{
如果（键=='Enter'）{
调度（getWeather（位置））
}
设置位置（“”）
}
返回(
);
}
导出默认应用程序；

字段代码：

const Field = ({ type, className, value, onChange, id, onKeyPress }) => {
  return (
    <>
      <input 
        type={type} 
        className={className} 
        id={id}
        value={value}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <label 
        htmlFor="input" 
        className="weather__location"
      >
        Location
      </label>
    </>
  )
}

export default Field

const字段=（{type，className，value，onChange，id，onKeyPress}）=>{
返回(
位置
)
}
导出默认字段

您在每次按键时都将location设置为空字符串，因此每次调用onChange时location状态都将为空字符串

因此，解决此问题的方法是删除

getWeatherInfo

中的

setLocation（“”）

读取代码（这是您的代码吗？）-每次处理按键时，您都调用

setLocation（“”）

，每次调用

change

事件时，您也调用

setLocation（value）

。

const Field = ({ type, className, value, onChange, id, onKeyPress }) => {
  return (
    <>
      <input 
        type={type} 
        className={className} 
        id={id}
        value={value}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <label 
        htmlFor="input" 
        className="weather__location"
      >
        Location
      </label>
    </>
  )
}

export default Field