使用 dangerouslySetInnerHTML 以編程方式提交表單集

Question

我試圖在從更高的組件接收到序列化 HTML 的數據后提交表單，我調用服務器端呈現表單的 API。

有什么辦法可以做到這一點，正如我在所有已知方法中嘗試過的那樣，windows.onload =...(ById("submit").submit(); componentDidUpdate; 作為 createMarkup 之后的回調..

我是 React 的新手，如果上述情況導致無法調用提交，請告訴我。

謝謝！

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;

Answer 1

正如@Vitalii所說，這里需要useEffect，只需要正確使用它來監控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;

完整的工作示例： https://codesandbox.io/s/laughing-morning-5l5e1?file=/src/App.js

Answer 2

useEffect()鈎子可用於在渲染后執行代碼。

假設提供給 ServerSideForm 的data道具從空字符串''更改為ServerSideForm文本波紋管並且表單名稱是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可以在加載和呈現時使用useEffect提交myform表單：

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;

Answer 3

為了 html 中的 select 個元素，您需要等待它被渲染然后執行一個 querySelector 來訪問提交按鈕，您可以使用 useEffect 來實現它：

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

其次，以下代碼不是必需的：

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


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

您的最終代碼可能如下所示：

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;

提交按鈕的值可能會在重新渲染時丟失，或者您可能需要在每次重新渲染時執行某些操作，然后您可以從 useEffect 中刪除第二個參數，您的代碼將如下所示：

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;

這是一個干凈的例子https://codesandbox.io/s/clever-ellis-lxfxz