為什么我無法在React的表單中填寫任何內容？

所以我有一個表格，我需要用戶填寫這個表格，當他們發送訊息時，它應該到達我的 gmail。我為此使用 EmailJS 服務。所以我的表格是這樣的：

如您所見，用戶可以向我發送訊息，我的代碼如下所示：

用于發送資料的狀態：

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

提交功能：

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

useform鉤子：

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=..”有關，但我不確定這里到底是什么問題。

uj5u.com熱心網友回復：

您不需要在輸入上定義onChnage, value，onKeyUp當您呼叫register輸入時，它會回傳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.

標籤：反应 电子邮件 反应钩子

上一篇：為什么命令'exec'可以洗掉fifo檔案的阻塞狀態？

下一篇：將最新的azureblob存盤檔案獲取到邏輯應用發送電子郵件流