Soumettre par programme un ensemble de formulaires avec dangerouslySetInnerHTML

Question

J'essaie de soumettre un formulaire après que les données ont été reçues en tant que HTML sérialisé à partir d'un composant supérieur où j'appelle une API qui, côté serveur, rend un formulaire.

Existe-t-il un moyen de le faire, comme je l'ai essayé dans toutes les méthodes connues par moi, windows.onload = ... (ById ("submit"). Submit (); componentDidUpdate; comme rappel après createMarkup ..

Je suis novice dans React et si la condition ci-dessus rend impossible d'appeler, veuillez me le faire savoir.

Je vous remercie!

import React, { useEffect, useState } from 'react';

const ServerSideForm = (props) => {
  const [html, setHtml] = useState(props.data);

  const style = {
    display: 'none'
  };

  // useState(props)
  console.log('props', html);

  function createMarkup(props) {
    return { __html: props };
    // cb();
  }

  return <div style={style} dangerouslySetInnerHTML={createMarkup(html)}></div>;
  //
};

export default ServerSideForm;

javascript reactjs

1

A B 14 janv. 2021 à 00:15

Answer 1

useEffect() hook peut être utilisé pour exécuter le code après un rendu .

En supposant que data prop fourni à ServerSideForm passe de la chaîne vide '' au texte HTML ci-dessous et que le nom du formulaire est myform:

<form action="/action" method="POST" name="myform">
    <input type="text" name="field1" value="value1" />
    <input type="text" name="field2" value="value2" />
    <input type="submit" value="Submit" />
</form>

ServerSideForm peut utiliser useEffect pour envoyer le formulaire myform lorsqu'il est chargé et rendu:

import React, { useEffect } from 'react';

const ServerSideForm = (props) => {
    useEffect(() => {
        if (props.data.length) { // only when 'data' is loaded
            if (document.forms['myform']) { // when form is present
                document.forms['myform'].submit();
            }
        }
    });

    const style = {
        display: 'none'
    };

    return <div style={style} dangerouslySetInnerHTML={{
        __html: props.data
    }}></div>;
};

export default ServerSideForm;

1

Vitalii 13 janv. 2021 à 22:42

Answer 2

Comme @Vitalii l'a dit, useEffect est ce qu'il faut ici, il doit juste être utilisé correctement pour surveiller les changements dans props.data.

import React from "react";
import { useState, useEffect } from "react";
const ServerSideForm = (props) => {
  const [html, setHtml] = useState(props.data);

  useEffect(() => {
    setHtml(props.data);
  }, [props.data]);
  const style = {
    // display: "none" //This hides your html
  };

  // useState(props)
  console.log("props", html);

  function createMarkup(props) {
    return { __html: props };
    // cb();
  }

  return <div style={style} dangerouslySetInnerHTML={createMarkup(html)}></div>;
};
export default ServerSideForm;

Exemple de travail complet: https://codesandbox.io/s /laughing-morning-5l5e1?file=/src/App.js

1

Sir Codes Alot 13 janv. 2021 à 22:41

Answer 3

Afin de sélectionner des éléments dans votre html, vous devez attendre qu'il soit rendu, puis exécuter un querySelector pour accéder au bouton d'envoi, vous pouvez y parvenir avec useEffect:

useEffect(() => {
  // This code allows you to execute code after render (return) like querySelector or whatever
  submitButton = document.querySelector(".submitButton");
}, [props.data]);

Deuxièmement, le code suivant n'est pas nécessaire:

const [html, setHtml] = useState(props.data);


function createMarkup(props) {
  return { __html: props };
  // cb();
}

Votre code final peut ressembler à ceci:

import React, { useEffect } from 'react';

const ServerSideForm = (props) => {
  let submitButton;

  const style = {
    display: 'none'
  };

  useEffect(() => {
    submitButton = document.querySelector(".submit");
    // Here you can do whatever you want with the "submit button"
  }, [props.data]);

  function createMarkup(htmlString) {
    return { __html: htmlString };
    // cb();
  }

  return <div style={style} dangerouslySetInnerHTML={props.data}></div>;
  // This this option is also correct
  // return <div style={style} dangerouslySetInnerHTML={createMarkup(data)}></div>;
};

export default ServerSideForm;

Probablement la valeur du bouton de soumission est perdue à un moment donné lors du re-rendu ou peut-être que vous devez exécuter quelque chose à chaque re-rendu, alors vous pouvez supprimer le deuxième paramètre de useEffect et votre code ressemblerait à ceci:

import React, { useEffect } from 'react';
        
const ServerSideForm = (props) => {
  let submitButton;
  
  const style = {
    display: 'none'
  };
  
  useEffect(() => {
    submitButton = document.querySelector(".submit");
    if (submitButton) {
      // Here you can do whatever you want with the "submit button"
    }
  });
  
  function createMarkup(htmlString) {
    return { __html: htmlString };
    // cb();
  }
  
  return <div style={style} dangerouslySetInnerHTML={props.data}></div>;
  // This this option is also correct
  // return <div style={style} dangerouslySetInnerHTML={createMarkup(data)}></div>;
  };
  
export default ServerSideForm;

Voici un exemple propre https://codesandbox.io/s/clever-ellis-lxfxz

1

Rodolfo Robles 14 janv. 2021 à 00:01

De nouvelles questions

javascript

Soumettre par programme un ensemble de formulaires avec dangerouslySetInnerHTML

3 réponses

Questions connexes