Как получить значения fetcher.Form в ремиксе
Я использую useFetcher() для создания формы через <fetcher.Form>. У меня есть несколько полей ввода в форме, но я не хочу, чтобы форма отправлялась, когда пользователь нажимает клавишу ввода. Для этого при отправке формы у меня есть обработчик формы, который вызывает e.preventDefault(). Я хочу, чтобы форма была отправлена с помощью явного действия пользователя (нажатия кнопки «Сохранить». Я предполагал, что для отправки формы вручную я вызову метод fetcher.submit(), но для этого мне нужны значения форм, но сборщик Хук, похоже, не обеспечивает способа их получения. Я не могу придумать простой способ заставить значения форм выполнять отправку без создания контролируемых полей ввода, что сводит на нет всю цель использования <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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Самое простое — создать форму 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>
);
}
Обновлено: Другой вариант — сохранить обычный обработчик отправки.
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>
);
}
Я обновил свой ответ альтернативным ответом... в любом случае, рад, что смог помочь.
В вашем первом примере я заметил, что он все равно отправляется, если кнопка находится внутри тела формы. Когда я перемещаю его за пределы тела формы, он работает так, как ожидалось. Я думаю, это потому, что вызываются методы submitHandler и realSubmit. Это не проблема, потому что я хочу, чтобы кнопка отправки находилась за пределами формы, но такое поведение для меня не было очевидным.
ты спасатель! Кстати, вы помогли мне своими ответами и на другие посты. Я решаю тебя!