在用户 clicks/submits 之后从表单输入中删除文本

Question

我想在用户单击提交后从表单的输入字段中删除文本。我能够使用基本的 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;

Answer 1

您正在尝试通过 class 名称寻址单个元素，该元素在多个项目之间共享。您需要在这种情况下使用 querySelectorAll() 并迭代结果（需要分配给变量）将它们的值重置为空字符串。示例如下所示：

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

Answer 2

您需要使用document对象的querySelectorAll方法，并且需要遍历该方法返回的元素列表。

例如：

/* 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 选择器来搜索元素，因此要搜索 class，您需要将 . 在它的名字前面。

在用户 clicks/submits 之后从表单输入中删除文本

Remove text from form input after user clicks/submits

javascript

reactjs

react-native

dom

use-state