React TypeScript下回车键触发setPack无响应问题求助

针对你遇到的按下回车键时setPack(target.value)无响应的问题，以下是具体排查方向和解决方案：

1. 阻止回车触发的表单默认提交行为 #

如果你的<input>包裹在<form>标签内，按下回车键会触发表单的默认提交动作，导致页面刷新，setPack的状态更新会被页面刷新覆盖，看起来就像未生效。解决方法是在键盘事件回调中阻止默认行为：

<input 
  value={pack} 
  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
    const target = e.target as HTMLInputElement;
    if (e.key === 'Enter') {
      e.preventDefault(); // 阻止表单默认提交
      setPack(target.value);
    }
  }} 
  onChange={e => setPack(e.target.value)} 
/>

2. 替换currentTarget为target #

在键盘事件中直接使用e.target更直接，可避免currentTarget带来的潜在歧义，简化类型断言：

<input 
  value={pack} 
  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      setPack((e.target as HTMLInputElement).value);
    }
  }} 
  onChange={e => setPack(e.target.value)} 
/>

3. 优化逻辑：直接调用更新方法 #

由于onChange已经同步了输入框值到pack状态，按下回车时pack已经是最新值，你可以直接调用updatePack，无需重复更新状态：

<input 
  value={pack} 
  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      updatePack(); // 直接触发更新操作
    }
  }} 
  onChange={e => setPack(e.target.value)} 
/>

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