javascript 如何在remix中获取fetcher.form值

djmepvbi 于 2023-09-29 发布在 Java

关注(0)|答案(1)|浏览(77)

我使用useFetcher（）通过创建一个表单<fetcher.Form>。我在整个表单中有几个输入字段，但我不希望在用户按回车键时提交表单。为此，在提交表单时，我有一个表单处理程序，它调用e.preventDefault（）。我希望通过明确的用户操作（单击“保存”按钮）提交表单。我假设为了手动提交表单，我将调用fetcher.submit（），但我需要表单的值来完成此操作，但fetcher钩子似乎没有提供获取它们的方法。我不能想出一个简单的方法来获得表单的值来进行提交，而不创建受控输入字段，这违背了使用的整个目的<fetcher.Form>。解决方案是创建一个完整的表单与受控输入还是我错过了什么？

const fetcher = useFetcher():

function submitHandler(e: FormEvent) {
    e.preventDefault();
}

function realSubmit(){
    // let formData = fetcher.data;
    let formData = ""; // how do I get the form data??

    fetcher.submit(formData, fetcher.formAction);
}

return(
    <fetcher.Form action="/some/route" onSubmit={submitHandler} method="post">
        <input name="input1" type="text"/>
        <input name="input2" type="text"/>
        <input name="input3" type="text"/>
     
        <button type="submit" onClick={realSubmit}>Save</button>
    </fetcher.Form>
);

任何帮助将不胜感激！

JavaScript

来源：https://stackoverflow.com/questions/77190406/how-to-get-fetcher-form-values-in-remix

1条答案

按热度按时间

bf1o4zei1#

最简单的是创建一个表单ref。然后，您可以从ref创建一个FormData对象并提交它。

export default function Index() {
  const fetcher = useFetcher();
  const formRef = useRef<HTMLFormElement>(null);
  function submitHandler(e: FormEvent) {
    e.preventDefault();
  }

  function realSubmit() {    
    const formData = new FormData(formRef.current!);
    // modify formData here
    formData.set("message", "hello world")
    fetcher.submit(formData);
  }

  return (
    <fetcher.Form ref={formRef} onSubmit={submitHandler} method="post">
      <input name="input1" type="text" />
      <input name="input2" type="text" />
      <input name="input3" type="text" />

      <button type="submit" onClick={realSubmit}>
        Save
      </button>
    </fetcher.Form>
  );
}

EDIT：另一种选择是保留常规的提交处理器。

export default function Index() {
  const fetcher = useFetcher();

  function submitHandler(e: FormEvent) {
    // get formData from currentTarget (form)
    const formData = new FormData(e.currentTarget);

    // modify formData here
    formData.set("message", "hello world")

    // submit formData using fetcher
    fetcher.submit(formData);

    // prevent default form submit
    e.preventDefault();
  }

  return (
    <fetcher.Form onSubmit={submitHandler} method="post">
      <input name="input1" type="text" />
      <input name="input2" type="text" />
      <input name="input3" type="text" />

      <button type="submit">
        Save
      </button>
    </fetcher.Form>
  );
}

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 如何在remix中获取fetcher.form值

1条答案

相关问题

热门标签

最新问答