Betriebsumgebung Ruby 2.6.5 Rails 6.0.3.2
Nachdem ich endlich herausgefunden habe, wie PreventDefault in JavaScript funktioniert, habe ich es veröffentlicht, um es zu organisieren.
Bevor wir über die Notwendigkeit von PreventDefault sprechen, lassen Sie uns zunächst darüber sprechen, was PreventDefault überhaupt tut.
Sie mögen denken, dass es nicht erklärt wird, aber wenn Sie versuchen, es genau zu erklären, wird es wahrscheinlich eine beträchtlich lange Anzahl von Zeilen erfordern, und ich denke, dass es einfacher zu verstehen ist, wenn Sie ein konkretes Beispiel geben, also kurz gesagt erklärt. Ich werde es sofort anhand eines konkreten Beispiels erklären.
Ruby:index.html.erb
<%= form_with url: "/posts", method: :post do |form| %>
<%= form.text_field :fuga %>
<%= form.submit 'Post' , id: "submit" %>
<% end %>
Wenn Sie in index.rb auf die Schaltfläche "Posten" klicken, wird der in fuga eingegebene Inhalt veröffentlicht. Wenn Sie es so lassen, wie es ist, wird durch Klicken auf die Post-Schaltfläche die Seite geladen. Nehmen wir also an, Sie haben asynchrone Kommunikation hergestellt, indem Sie das folgende JavaScript geschrieben haben.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
//Code, der sich genauso verhält wie beim Klicken auf die Post-Schaltfläche (er wird länger, lassen Sie ihn also weg).
});
};
window.addEventListener("load", hoge);
Hier gibt es jedoch ein Problem. Das heißt, dasselbe Verhalten wird zusätzlich durch asynchrone Kommunikation ausgeführt, sodass ein Beitrag zweimal veröffentlicht wird. Insbesondere durch Klicken auf die Post-Schaltfläche wird eine asynchrone Kommunikation durchgeführt, die Anzahl der Posts erhöht sich um eins, ohne die Seite zu laden, und durch erneutes Laden der Seite, wenn auf die ursprüngliche Post-Schaltfläche geklickt wird. Das Verhalten wird reflektiert und die Anzahl der Beiträge wird um eins erhöht. Daher wird derselbe Beitrag zweimal veröffentlicht.
Verwenden Sie Prevent.Default, um dieses Problem zu lösen. Fügen Sie einfach eine Zeile wie unten hinzu.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
//Code, der sich genauso verhält wie beim Klicken auf die Post-Schaltfläche (er wird länger, lassen Sie ihn also weg).
});
};
window.addEventListener("load", hoge);
Dies kann das Standardverhalten beeinträchtigen, sodass Sie nicht mehr zweimal in einem einzelnen Beitrag posten. Hier fragte ich jedoch: "Was ist das Standardverhalten überhaupt?" "Warum wird das Verhalten der asynchronen Kommunikation nicht nur bequem gestört?" Ich hatte eine Frage.
Grundsätzlich scheint das Standardverhalten in Ruby on Rails in Ordnung zu sein, wenn erkannt wird, dass Vorgänge in der Ansicht Informationen aus der Ansicht an den Controller senden und alle Aktionen im Controller verschoben werden. In diesem Fall ist das Standardverhalten, dass durch Klicken auf die Schaltfläche "Posten" die Aktion "Erstellen" funktioniert und die Fuga gespeichert wird. Es ist der normale Fluss von Ruby on Rails. Daher betrachte ich präventDefault als ** "Hindernis für den normalen Fluss von Ruby on Rails" **.