与状态相关的字段在成功提交表单时不明确

Question

我有一个联系表单，当表单提交成功时，它应该清除与状态相关的表单字段名称、电子邮件和消息。 表单提交成功，但表单字段名称、电子邮件和消息不明确。

出于测试目的，我正在做的是将默认值传递给状态，但在初始加载期间这些值不会被填写到表单中。

export default function Contact() {
  const [name, setName] = useState('John Doe')
  const [email, setEmail] = useState('me@example.com')
  const [message, setMessage] = useState('Hello, this is test message.')

  const onSubmit = (e) => {
    e.preventDefault()
    const form = {"name": name, "email": email, "message": message}
    return fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(form),
      headers: {'Content-Type': 'application/json'}
    }).then(response => {
      if(response.status === 200){
        setName('')
        setEmail('')
        setMessage('')
      } else {
      }
    }).catch(err => err)
  }
  
  return (
      <section>
        <form method='post'>
          <div>
            <label>Name</label>
            <input type="text" name="name" onChange={(e) => {setName(e.target.value)}}/>
          </div>
          <div>
            <label>Email Address</label>
            <input type="email" name="email" onChange={(e) => {setEmail(e.target.value)}}/>
          </div>
          <div>
            <label>Message</label>
            <textarea minLength={5} maxLength={2000} rows="6" name="message" onChange={(e) => {setMessage(e.target.value)}}></textarea>
          </div>
          <div>
            <button type='submit' onClick={(e) => {onSubmit(e)}}>Send Message</button>
          </div>
        </form>
      </section>
  );
}

Answer 1

正如 User456 所说，您需要为每个<input />添加value={variable} 。 例子：

import { useState } from "react";

export default function Contact() {
  const [name, setName] = useState("John Doe");
  const [email, setEmail] = useState("me@example.com");
  const [message, setMessage] = useState("Hello, this is test message.");

  const onSubmit = (e: any) => {
    e.preventDefault();
    setName("");
    setEmail("");
    setMessage("");
  };

  return (
    <section>
      <form method="post">
        <div>
          <label>Name</label>
          <input
            type="text"
            name="name"
            value={name}
            onChange={e => {
              setName(e.target.value);
            }}
          />
        </div>
        <div>
          <label>Email Address</label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={e => {
              setEmail(e.target.value);
            }}
          />
        </div>
        <div>
          <label>Message</label>
          <textarea
            minLength={5}
            maxLength={2000}
            name="message"
            value={message}
            onChange={e => {
              setMessage(e.target.value);
            }}></textarea>
        </div>
        <div>
          <button
            type="submit"
            onClick={e => {
              onSubmit(e);
            }}>
            Send Message
          </button>
        </div>
      </form>
    </section>
  );
}