表单操作值未更新 - Javascript & React

Form action value not updating - Javascript & React

提问人:O-1998 提问时间:11/14/2023 更新时间:11/14/2023 访问量:20

问:

我正在尝试将表单操作值设置为与文本字段中的值相对应。该值不会像我预期的那样在文本更改时更新。该值返回“https://URL/?image_link=undefined”。关于是什么原因造成的任何想法?

import useForm from "./UseForm";

const FORM_ENDPOINT = "https://URL/?image_link="; // TODO - update to the correct endpoint
var final_endpoint=""
const Form = () => {
  const additionalData = {
    sent: new Date().toISOString(),
  };

  const { handleSubmit, status, message } = useForm({
    additionalData,
  });

  if (status === "success") {
    return (
      <>
        <div className="text-2xl">Thank you!</div>
        <div className="text-md">{message}</div>
      </>
    );
  }

  if (status === "error") {
    return (
      <>
        <div className="text-2xl">Something bad happened!</div>
        <div className="text-md">{message}</div>
      </>
    );
  }
  return (
    <form
      action={final_endpoint}
      id="myform"
      onSubmit={handleSubmit}
      method="POST"
    >
      <div className="pt-0 mb-3">
        <input
          type="text"
          placeholder="Image Link"
          name="image_link"
          change={final_endpoint=FORM_ENDPOINT+document.getElementsByName('image_link').value}
          className="focus:outline-none focus:ring relative w-full px-3 py-3 text-sm text-gray-600 placeholder-gray-400 bg-white border-0 rounded shadow outline-none"
          required
        />
      </div>
      {status !== "loading" && (
        <div className="pt-0 mb-3">
          <button
            className="active:bg-blue-600 hover:shadow-lg focus:outline-none px-6 py-3 mb-1 mr-1 text-sm font-bold text-white uppercase transition-all duration-150 ease-linear bg-blue-500 rounded shadow outline-none"
            type="submit"
          >
            Submit Image
          </button>
        </div>
      )}
    </form>
  );
};

export default Form;

我已经尝试了几种不同的方法来使其工作,但仍然无法实现。任何帮助将不胜感激。

JavaScript HTML ReactJS 表单

评论

0赞 Dushan Ranasinghage 11/14/2023
你试过删除吗?在 React 中,我们不一定需要像传统的 HTML 表单那样。method="POST"

答: 暂无答案