问在用户单击/提交后从表单输入中删除文本
EN

Stack Overflow用户

提问于 2022-04-06 17:25:31

回答 2查看 141关注 0票数 1

一旦用户单击submit，我希望从表单的输入字段中删除文本。我能够使用基本的DOM操作来清除textarea，这让我感到惊讶，但随后无法对输入的文本区域执行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;

use-state

javascript

reactjs

react-native

dom

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-06 17:38:10

您正在尝试按类名来寻址单个元素，该元素在多个项之间共享。对于这种情况，您需要使用querySelectorAll()，并迭代结果(需要为变量赋值)，将它们的值重置为空字符串。一个例子如下所示：

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

票数 3

Stack Overflow用户

发布于 2022-04-06 17:49:24

您需要使用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 = "";
}