为什么我无法在 React 的表单中填写任何内容？

Question

所以我有一个表格，我需要用户填写这个表格，当他们发送消息时，它应该会到达我的 gmail。我为此使用 EmailJS 服务。所以我的表格看起来像这样：

如你所见，用户可以向我发送消息，我的代码如下所示：

发送数据使用状态：

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

onSubmit 函数：

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 函数：

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

使用表单挂钩：

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

完整表格：

<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>

所以我的问题是我无法在输入中填写任何内容。当我尝试输入一些它没有输入的东西时，我猜它与所有输入中的“value=..”有关，但我不确定这里到底是什么问题。

Answer 1

您不需要在输入上定义 onChnage、value、onKeyUp，当您在输入上调用 register 时，它 returns onChange,onBlur,ref，则react-hook-forms将由ref控制数值。所以下面的例子应该可以解决你的问题：

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>
  );
}

顺便说一句，请考虑 register 适用于输入的 name，而不是 id。

为什么我无法在 React 的表单中填写任何内容？

Why I can't fill anything in my form in React?

email

reactjs

react-hooks