Environnement d'exploitation Ruby 2.6.5 Rails 6.0.3.2
Maintenant que j'ai enfin compris comment preventDefault fonctionne en JavaScript, je l'ai publié pour l'organiser.
Avant de parler de la nécessité de preventDefault, parlons de ce que fait preventDefault en premier lieu.
Vous pensez peut-être que ce n'est pas expliqué, mais si vous essayez de l'expliquer exactement, cela nécessitera probablement un nombre de lignes considérablement long, et je pense que c'est plus facile à comprendre si vous donnez un exemple concret, donc en bref expliqué. J'expliquerai immédiatement sur la base d'un exemple concret.
Ruby:index.html.erb
<%= form_with url: "/posts", method: :post do |form| %>
<%= form.text_field :fuga %>
<%= form.submit 'Publier' , id: "submit" %>
<% end %>
Si vous cliquez sur le bouton de publication dans index.rb, le contenu saisi dans fuga sera publié. Si vous le laissez tel quel, cliquez sur le bouton de publication pour commencer à charger la page, supposons donc que vous ayez établi une communication asynchrone en écrivant le JavaScript suivant.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
//Code qui se comporte de la même manière que lorsque vous cliquez sur le bouton de publication (ce sera plus long, alors omettez-le)
});
};
window.addEventListener("load", hoge);
Cependant, il y a un problème ici. Autrement dit, le même comportement est également effectué en utilisant une communication asynchrone, de sorte qu'une publication entraînera la publication deux fois. Plus précisément, le fait de cliquer sur le bouton de publication provoque une communication asynchrone, le nombre de publications augmente de un sans charger la page, et en rechargeant la page, lorsque le bouton de publication d'origine est cliqué. Le comportement sera reflété et le nombre de messages augmentera d'un. Par conséquent, le même message sera publié deux fois.
Utilisez prevent.Default pour résoudre ce problème. Ajoutez simplement une ligne comme ci-dessous.
function hoge() {
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
//Code qui se comporte de la même manière que lorsque vous cliquez sur le bouton de publication (ce sera plus long, alors omettez-le)
});
};
window.addEventListener("load", hoge);
Cela peut interférer avec le comportement par défaut, de sorte que vous ne publiez plus deux fois dans un même message. Cependant, ici, j'ai demandé: "Quel est le comportement par défaut en premier lieu?" "Pourquoi le comportement de la communication asynchrone n'est-il pas seulement perturbé de manière pratique?" J'avais une question.
Fondamentalement, le comportement par défaut de Ruby on Rails semble convenir à la reconnaissance que les opérations de la vue envoient des informations de la vue au contrôleur et que toute action du contrôleur se déplace. Dans ce cas, le comportement par défaut est que le fait de cliquer sur le bouton Publier fera fonctionner l'action de création et enregistrera fuga. C'est le flux normal de Ruby on Rails. Par conséquent, je considère preventDefault comme ** "un obstacle au flux normal de Ruby on Rails" **.
Recommended Posts