React输入框仅能输入1-2字符问题及解决方法

问题场景 #

开发地图组件时，用React的useState钩子管理输入状态，搭配shadcn/ui的Input组件出现异常：手动输入只能敲1-2个字符，但粘贴超长文本完全正常。

排查尝试（均无效） #

• 将Input组件的type改为text
• 移除容器的grid布局样式
• 替换为原生<input>标签
• 注释掉onChange绑定后输入恢复正常，但无法通过handlePost函数获取输入值

最终解决方案 #

把包含Input组件的对话框拆成独立组件，问题彻底解决。

核心代码示例 #

原问题代码（简化版） #

import { useState } from 'react';
import { Input } from '@/components/ui/input';

function MapComponent() {
  const [message, setMessage] = useState('');

  const handlePost = () => {
    // 处理输入值的业务逻辑
    console.log(message);
  };

  return (
    <div>
      {/* 地图渲染代码 */}
      <div className="dialog">
        <Input
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="输入内容..."
        />
        <button onClick={handlePost}>提交</button>
      </div>
    </div>
  );
}

拆分后的组件结构 #

// 独立的输入对话框组件
import { useState } from 'react';
import { Input } from '@/components/ui/input';

function InputDialog({ onSubmit }) {
  const [message, setMessage] = useState('');

  const handleSubmit = () => {
    onSubmit(message);
    setMessage('');
  };

  return (
    <div className="dialog">
      <Input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="输入内容..."
      />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

// 地图组件中调用独立对话框
function MapComponent() {
  const handlePost = (message) => {
    // 处理输入值的业务逻辑
    console.log(message);
  };

  return (
    <div>
      {/* 地图渲染代码 */}
      <InputDialog onSubmit={handlePost} />
    </div>
  );
}

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