如果有事件，我如何在 React 中每 10 秒提交一次表单？

Question

所以基本上我有一些输入字段，我从表单提交中收集数据，但我必须单击按钮或按回车键才能提交表单。我想要的是每 10 秒提交一次表单，所以我尝试在 useEffect 中创建一个间隔，但它给了我一个错误，因为 e 没有定义，是的，我已经将一个事件传递给函数

 const handleDataChange = useCallback((e) => {
    e.preventDefault();
    setUserData({
      ["job"] : e.target.elements.job.value ? e.target.elements.job.value : "",
      ["fName"] : e.target.elements.fName.value ? e.target.elements.fName.value : "",
      ["lName"] : e.target.elements.lName.value ? e.target.elements.lName.value : "",
      ["email"] : e.target.elements.email.value ? e.target.elements.email.value : "",
      ["phone"] : e.target.elements.phone.value ? e.target.elements.phone.value : "",
      ["country"] : e.target.elements.country.value ? e.target.elements.country.value : "",
      ["city"] : e.target.elements.city.value ? e.target.elements.city.value : "",
      ["pcode"] : e.target.elements.pcode.value ? e.target.elements.pcode.value : "",
      ["birth"] : e.target.elements.birth.value ? e.target.elements.birth.value : "",
      ["summary"]: summary ? summary : "",
      fireEmployment,
      fireEducation,
      fireLinks,
      fireSkills,
      fireLanguages
    })
  })
  useEffect(() => {
    const interval = setInterval(() => {
      handleDataChange()
    }, 5000);
    return () => clearInterval(interval);
  }, [handleDataChange]);
<form className="user__infoTop" onSubmit={e => handleDataChange(e)}>
          <h1>Personal Details</h1>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="Job Title" name="job" />
            <div className="photo">
              <label htmlFor="upload-photo">
                <Avatar src={img} alt="avatar" />
                <span>
                  Upload <CloudUploadIcon />
                </span>
              </label>
              <input
                type="file"
                id="upload-photo"
                hidden
                onChange={onFileChange}
              />
            </div>
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" />
            <TextField variant="filled" type="text" label="Last Name" name="lname" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" />
            <TextField variant="filled" type="text" label="Phone number" name="phone" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="Country" name="country" />
            <TextField variant="filled" type="text" label="City" name="city" />
          </div>
          </div>
          </form>

Answer 1

函数的名称令人困惑，因为它在 submit 上触发，而不是在更改时触发。所以你只需要每 10 秒提交一次表单。

const interval = setInterval(() => {
  formRef.current.submit();
}, 5000);

然后handleDataChange将被事件变量触发。（但我仍然认为有必要将其名称更改为 handleDataSubmit）

Answer 2

所以我找到了一种方法，我创建了一个提交按钮并给它显示：none 然后从一个 useEffect 函数我创建了一个间隔，每 10 秒单击该按钮。这是代码：

   useEffect(() => {
     const interval = setInterval(() => {
      const formSubmitButton = document.querySelector(".saveInfoForm");
      formSubmitButton.click();
     }, 10000);
     return () => clearInterval(interval);
   },[])

如果有事件，我如何在 React 中每 10 秒提交一次表单？

How can I submit a form every 10 seconds in React if it has events?

javascript

reactjs

babeljs

use-effect