how to fix onChange event won't work in input react-CodePudding

onChange event won't work in input react when trying to call a function! any help please I'm getting values using watch() my point is when onChange in input I want to get the whole value


const Valid = () =>{
    let Username = watch("Username")
  console.log(Username)

    const {data} = useQuery(CHECK_AVAILABLITY, {
      variables:{Username},

      }
      
    )




 <form>
            <Input onChange={Valid} type="text" {...register("Username")} placeholder="Username " />

            <Input type="password" placeholder="Password" />
            <Button type="submite" >Sign Up</Button>

          </form>

CodePudding user response：

Try to put it like that

<Input onChange={(e) => Valid(e.target.value)} type="text" {...register("Username")} placeholder="Username " />

and then get the variable in the params of the Valid function

exemple :

const valid = (username) => {
console.log(username)
}

CodePudding user response：

I assume that you are using react hook form. you can use the watch and the useEffect method

let Username = watch("Username")

useEffect(() => {
  console.log('username value', Username);
},[Username]);

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