So I have a form, and I need users to fill this form and when they send a message, it should come to my gmail. I use EmailJS service for this. So my form looks like this:

So as you see, users can send me messages, and my code looks like this:

Usestate for sending data:

const [toSend, setToSend] = useState({
        from_name: '',
        to_name: '',
        message: '',
        reply_to: '',
        subject: ''
      });

onSubmit function:

const onSubmit = (e) => {
        e.preventDefault();
        send(
            'service_id',
            'template_id',
            toSend,
            'user_id'
          )
            .then((response) => {
              console.log('SUCCESS!', response.status, response.text);
            })
            .catch((err) => {
              console.log('FAILED...', err);
            });
        reset();
      };

handleChange function:

const handleChange = (e) => {
        setToSend({ ...toSend, [e.target.name]: e.target.value });
      };

useform hook:

const {register, handleSubmit, formState: { errors }, reset, trigger} = useForm();

Whole form:

<form onSubmit={handleSubmit(onSubmit)}>
                    <input type="text"
                     placeholder="Name"
                     name="from_name"
                     value={toSend.from_name}
                     onChange={handleChange}
                      id="name" {...register('name', { required: "Name is required" })}
                    onKeyUp={() => {
                        trigger("name");
                      }}/>
                    {errors.name && (<span className="danger_text">{errors.name.message}</span>)}
                    <input type="text"
                     placeholder="Email"
                     name="reply_to"
                     value={toSend.reply_to}
                     onChange={handleChange}
                      id="email"  {...register("email", { required: "Email is Required" ,
                pattern: {
                  value: /^[A-Z0-9._% -] @[A-Z0-9.-] \.[A-Z]{2,}$/i,
                  message: "Invalid email address",
                }})}
                onKeyUp={() => {
                  trigger("email");
                }}
              />
              {errors.email && (
                <small className="danger_text">{errors.email.message}</small>
              )}
                    <input type="text"
                     placeholder=
                     "Subject" 
                     id="subj"
                     name="subject"
                     value={toSend.subject}
                     onChange={handleChange}/>
                    <input type="text"
                     placeholder="Message"
                      id="msg"
                      name="message"
                      value={toSend.message}
                      onChange={handleChange}
                       {...register('msg', { required: true })}/>
                    {errors.msg && (<small className="danger_text">Enter your message</small>)}
                    <input type="submit" className="btn_red" value="Send a message"></input>
                </form>

So my problem is that I can't fill anything in inputs. When I try to type something it just doesn't type in, I'm guessing it has something to do with "value=.." in all inputs, but I'm not sure what's exactly the problem here.

CodePudding user response：

You don't need to define onChnage, value, onKeyUp on your inputs, when you call register on input, it returns onChange,onBlur,ref, then react-hook-forms will control the values by ref. so below example should solve your problem:

import { useForm } from 'react-hook-form';
...
function MyComp() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm();

  const onSubmit = (toSend) => {
    send(
        'service_id',
        'template_id',
        toSend,
        'user_id'
      )
      .then((response) => {
          console.log('SUCCESS!', response.status, response.text);
        })
      .catch((err) => {
          console.log('FAILED...', err);
       });
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="Name"
        name="from_name"
        id="name"
        {...register('from_name', { required: 'Name is required' })}
      />
      {errors.from_name && (
        <span className="danger_text">{errors.from_name.message}</span>
      )}
      <input
        type="text"
        placeholder="Email"
        name="reply_to"
        id="email"
        {...register('reply_to', {
          required: 'Email is Required',
          pattern: {
            value: /^[A-Z0-9._% -] @[A-Z0-9.-] \.[A-Z]{2,}$/i,
            message: 'Invalid email address',
          },
        })}
      />
      {errors.reply_to && (
        <small className="danger_text">{errors.reply_to.message}</small>
      )}
      <input
        type="text"
        placeholder="Subject"
        id="subj"
        name="subject"
        {...register('subject')}
      />
      <input
        type="text"
        placeholder="Message"
        id="msg"
        name="message"
        {...register('message', { required: true })}
      />
      {errors.message && <small className="danger_text">Enter your message</small>}
      <input type="submit" className="btn_red" value="Send a message"></input>
    </form>
  );
}

BTW, consider that register works with input's name, not id.