React中Input组件onChange事件失效，如何获取完整输入值？

核心问题 #

1. 错误的onChange回调：你把组件函数Valid直接传给Input的onChange，这完全不符合事件回调的要求——onChange需要接收事件对象的处理函数，而非组件渲染函数，这会导致逻辑混乱，无法触发预期行为。
2. useQuery未监听输入变化：当前useQuery未设置触发条件，Username变化时不会自动发起查询。
3. 按钮type拼写错误：type="submite"应为type="submit"。

修正后的代码示例 #

import { useQuery } from '@apollo/client';
import { useForm } from 'react-hook-form';

// 假设CHECK_AVAILABLITY是你的GraphQL查询语句
const CHECK_AVAILABLITY = /* GraphQL查询内容 */;

const Valid = () => {
  const { register, watch } = useForm();
  // 实时监听Username输入值
  const Username = watch("Username");

  // 仅当Username有值时触发查询，值变化时自动重新请求
  const { data } = useQuery(CHECK_AVAILABLITY, {
    variables: { Username },
    enabled: !!Username,
  });

  // 自定义onChange处理函数，获取输入框完整值
  const handleUsernameChange = (e) => {
    const fullValue = e.target.value;
    console.log("输入框完整值:", fullValue);
    // 可在此添加额外逻辑
  };

  return (
    <form>
      <Input 
        onChange={handleUsernameChange} 
        type="text" 
        {...register("Username")} 
        placeholder="Username " 
      />
      <Input type="password" placeholder="Password" />
      <Button type="submit">Sign Up</Button>
    </form>
  );
};

export default Valid;

关键说明 #

• 正确的onChange回调：单独定义handleUsernameChange函数，通过e.target.value直接获取输入框完整值，同时配合register同步表单状态。
• useQuery自动触发：通过enabled选项控制查询时机，避免空值请求；variables中的Username会被自动监听，值变化时重新执行查询。
• watch的作用：watch("Username")可实时获取输入最新值，和onChange的取值方式互补，满足不同场景需求。

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