用戶單擊/提交后從表單輸入中洗掉文本

一旦用戶單擊提交，我想從表單的輸入欄位中洗掉文本。我能夠使用基本的 DOM 操作來清除文本區域，這讓我在 React 中感到驚訝，但隨后無法對輸入文本區域進行 DOM 操作。這是否可以通過 DOM 操作實作，如果它那么簡單，我會喜歡的。還是我應該走另一條路？

import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";
import PDF from "../../img/PDF.pdf";

const Contact = () => {
  const formRef = useRef();
  const [done, setDone] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    document.querySelector(".textarea").value = "";
    document.querySelector("usersinput").value = "";
    emailjs
      .sendForm(
        "0000",
        "0000",
        formRef.current,
        "0000"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div className="c">
      <div className="c-bg"></div>
      <div className="c-wrapper">
        <div className="c-left">
          <h1 className="c-title">Let's talk</h1>
          <div className="c-info">
            <div className="c-info-item">
              <img src={phone} alt="" className="c-icon" />
               61 0000
            </div>
            <div className="c-info-item">
              <img src={email} alt="" className="c-icon" />
              0000
            </div>
            <div className="c-info-item">
              <img src={resume} alt="" className="c-icon" />
              <a href={PDF} target="_blank">
                CV
              </a>
            </div>
            <div className="c-info-item">
              <img src={github} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={link} alt="" className="c-icon" />
              
            </div>
          </div>
        </div>
        <div className="c-right">
          <p className="c-description">
            <b>Who are you?</b> lorem
          </p>
          <form ref={formRef} onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="name"
              name="user_name"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="subject"
              name="user_subject"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="email"
              name="user_email"
              className="userinputs"
            />
            <textarea
              rows="5"
              placeholder="please enter your message..."
              name="message"
              className="textarea"
            ></textarea>
            <button>Submit</button>
            {done && "      Thank you..."}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

uj5u.com熱心網友回復：

您正在嘗試按類名來處理單個元素，該元素在多個專案之間共享。對于這種情況，您需要使用 querySelectorAll() 并迭代結果（需要分配給變數）將它們的值重置為空字串。一個示例如下所示：

let itms = document.querySelectorAll(".userinputs");
for (let itm of itms) {
    itm.value = "";
}

uj5u.com熱心網友回復：

您需要使用物件的querySelectorAll方法，document并且需要遍歷該方法回傳的元素串列。

例如：

/* Get the elements whit the css selector '.userinputs' */
var elements = document.querySelectorAll(".userinputs");

/* Iterate the elements array */
for(var element of elements) {
    element.value = "";
}

The-Lomax 的答案是正確的，但是該querySelectorAll方法使用 css 選擇器來搜索元素，因此要搜索一個類，您需要.在其名稱前加上 a。

標籤：javascript 反应 反应式 dom 使用状态

上一篇：具有動態行和列的react-nativeflatlist

下一篇：如何讓我的物理設備在ExpoGo上運行ReactNative以與我的應用程式的rails后端api通信？